Migrating from ts-loader to babel-loader

Background

• Babel 7 added TypeScript transpilation, so we’re no longer limited to ts-loader or awesome-typescript-loader.
• I wanted better error readability for redux-saga and found babel-plugin-redux-saga, which is, naturally, a Babel plugin.
• TSLint is being sunset in favor of ESLint. I expect a similar consolidation for loaders—Babel’s plugin ecosystem plus TS transpilation makes it attractive.

So I migrated.

Configuration

package.json:

"@babel/core": "^7.9.6",
"@babel/plugin-proposal-class-properties": "^7.8.3",
"@babel/plugin-proposal-object-rest-spread": "^7.9.6",
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/preset-env": "^7.9.6",
"@babel/preset-react": "^7.9.4",
"@babel/preset-typescript": "^7.9.0",
"@babel/runtime": "^7.9.6",
"babel-loader": "^8.1.0"

babel.config.js:

module.exports = function(api) {
  api.cache(true);

  return {
    presets: [
      ['@babel/preset-env', {
        targets: {
          chrome: '58',
          ie: '11'
        }
      }],
      '@babel/preset-react',
      '@babel/preset-typescript'
    ],
    plugins: [
      '@babel/plugin-syntax-dynamic-import',
      '@babel/proposal-class-properties',
      '@babel/proposal-object-rest-spread'
    ]
  };
};

webpack.common.js:

{
  loader: 'babel-loader'
}

After updating configs, rebuilding and running worked exactly as before.

Build Speed

Benchmarks: https://www.reddit.com/r/typescript/comments/bmz5m7/webpack_speedtests_with_tsloader_babel_7/

Babel’s architecture suggests better performance, and in practice I saw improvements.

FAQ

“TSC can transpile already—why use Babel?”

• tsc does type checking as well as transpilation. @babel/plugin-transform-typescript focuses on syntax only; type checking still happens via tsc --noEmit or ESLint.
• Babel provides granular syntax transforms tailored to target browsers.

References

• Compiling TypeScript via webpack and babel-loader
• ts-loader
• babel-loader
• Benchmark: ts-loader vs babel 7
• TypeScript and Babel 7
• @babel/preset-env vs @babel/plugin-transform-runtime