ts-loader vs babel-loader in Typescript using webpack

Viewed 3966

So I was trying to compare the output compiled code by these 2 combinations.

ts-loader

  {
    test: /\.tsx?$/,
    use: 'ts-loader',
  }

babel-loader

  use: {
      loader: 'babel-loader',
      options: {
        presets:
          [
            "@babel/preset-react",
            "@babel/preset-typescript",
          ]
      }
    }

Questions

  1. Is there any way to use cache in ts-loader like the cacheDirectory in babel?
  2. Any other benefits in using ts-loader instead of babel-loader?
1 Answers

for your questions:

  1. As someone already mentioned, there is an experimental setting in ts-loader to allow cache, you can check out configuration reference for more information: https://github.com/TypeStrong/ts-loader#experimentalfilecaching
  2. Afaik babel does not do typechecking on its own, so you would have to run TSC for that. Also it does not support 'const enum' syntax of ts...

Also you can mix the 2, have ts-loader for dev and babel for prod builds.

Related