Do I need babel-loader on top of tsloader to transpile typescript with webpack?

Question

I am writing webpack.config.js to transpile typescript (to be more precise tsx) into ES5 using tsloader and babel-loader. I have two questions:

1) Do we still need babel-loader even though tsloader output ES5 files?
2) Does it make sense to set compilerOptions.module in tsconfig.json to es6 when the target is es5?

tsconfig.json is as follows:

{
  "compilerOptions": {
    "module": "es6",
    "target": "es5",
    "jsx": "react"
  }
}

Thanks in advance.

score 6 · Accepted Answer · answered Mar 03 '18 at 07:51

6

1) Do we still need babel-loader even though tsloader output ES5 files?

No, we don't, unless there's a need to use non-compliant features that aren't supported by TypeScript (usually there's none).

2) Does it make sense to set compilerOptions.module in tsconfig.json to es6 when the target is es5?

Yes. It outputs ES5 code with ES modules that can be processed by bundling system (Webpack or Rollup).

answered Mar 03 '18 at 07:51

Estus Flask

206,104
70
425
565

thanks! Does it make any difference to webpack when compilerOptions.module is commonjs? – hitochan Mar 03 '18 at 07:53
Of course. The most important difference is that ES modules support tree-shaking. You import only what you use (this may vary depending on third-party packages). – Estus Flask Mar 03 '18 at 07:59
The first part of your answer is no longer valid(and should be updated): Upon Babel v7, only `babel-loader` is needed since it can read TypeScript. – NeoZoom.lua Apr 05 '22 at 18:14
1

@Rainning It's true but depends on the intention. It won't check types because it's... Babel, and there are some other differences https://babeljs.io/docs/en/babel-plugin-transform-typescript#caveats – Estus Flask Apr 05 '22 at 18:27
OK, my statement is baed on this answer: https://stackoverflow.com/a/52323181/5290519, sorry if that I might misunderstood it. Btw, I have a lot of confusion now. Could you help with my question related to this? https://stackoverflow.com/questions/71756885/webpack-tree-shaking-setup-among-webpack-babel-loader-typescript-tsconfig-targe – NeoZoom.lua Apr 05 '22 at 18:47
@Rainning The question's good, can't help with tree shaking though for the most part – Estus Flask Apr 05 '22 at 18:53
@EstusFlask: Might I ask you an additional question(, which is somehow important to me)? If the editor I'm using has `tsserver` language-server, does this mean that I actually don't need the cross-file type-checking feature from `ts-loader`(or anything similar)? – NeoZoom.lua Apr 05 '22 at 22:15
1

@Rainning It depends on your ide setup. But generally you'll be able to see errors in specific files in IDE, while the entire code base needs to be checked to guarantee that everything's ok. This kind of problem didn't occur to me, but if you ditch ts loader because of performance issues, you could keep type checking separated, e.g. build:check command, while keeping dev server and build are as fast as possible – Estus Flask Apr 06 '22 at 07:02

Do I need babel-loader on top of tsloader to transpile typescript with webpack?

1 Answers1