Trying to get this working with typescript

[evelant]

I have a large project which I would like to convert to TS over time. Webpack seems able build the client just fine, but I have problems with getting the server running in development mode. Babel-register seems to dislike import-ing a typescript file. It cannot find the import unless I add the .ts extension. If I add the .ts extension it interprets the file as JS, it never gets transpiled by TS and crashes.

Here is a link explaining how typescript and babel work together in webpack.

Is there a way to get around using babel-register in development?

Relevant section of loader config

{
                test: /\.tsx?$/,
                // loader: 'happypack/loader',
                include: srcDir,
                use: [{
                    loader: 'babel-loader',
                    options: {
                        "presets": [["es2015", {loose: true, modules: false}], "stage-1", "react"],
                        "plugins": [
                            "transform-runtime",
                            "meteor-imports"
                        ],
                    }
                },
                    {
                        loader: 'ts-loader',
                        options: {
                            transpileOnly: true,
                            entryFileIsJs: true

                        }
                    }
                ]

            },
            {
                test: /\.jsx?$/,
                // loader: 'happypack/loader',
                include: srcDir,
                use:[{
                    loader: 'babel-loader',
                    options: {
                        "presets": [["es2015", {loose: true, modules: false}], "stage-1", "react"],
                        "plugins": [
                            "transform-runtime",
                            "meteor-imports"
                        ],
                    }
                }
                ]

            },

[jthomaschewski]

Hi, I recently tried to get Crater working with typescript and mostly succeeded. I published my commits on https://github.com/jbbr/crater/tree/webpack2-typescript

Typescript works for server and client code in both dev and production and source maps work fine too. Test are probably broken also the solution might not be the best:

• ts(x) files are transformed with tsc, output path is the build directory
• client code is processed by webpack, server code is picked up by Meteor
• btw: the meteor package meteortypescript:compiler is not used nor required - its a leftover I forgot to remove in the repo and just spotted.

See also #151

[evelant]

@jbbr Thanks! I took a different approach and just used webpack without tsc. I disabled babel register, configured webpack to output to build/server.js, changed index.js to require(buildDir + '/server.js'), then added the following to start.js

  webpack(webpackServerConfig).watch({
  }, (err, stats) => {
    if(err) console.log(err);
    console.log("rebuilt server");
  });

This lets webpack watch the server directory and rebuild the server on any changes. The output of the build is picked up by smart restart at build/server.js and the server is restarted. This seems to be working well for me so far.

[jthomaschewski]

@fignuts thanks for explaining your config.

It would be interesting how your setup performs in bigger projects. As far as I know Meteor does some caching when building its modules. When letting the Meteor builder handle a huge bundle performance might be worse compared to small but cacheable modules.

I haven't done any benchmarks yet so there might be no performance impact for meteor server modules in this case. Not sure about this.