Search code examples
typescriptwebpackbabeljstsconfigts-loader

Compiling TypeScript with target set to 'ES3' or 'ES5' Internal

Just got into world of typescript, and trying to work with webpack ts-loader and babel-loader to compile & transpile typescript into ES5. But then I saw there's a compiler option in tsc that can target 'ES5', and I felt like 'what am I using babel-loader for then?'

So my questions are:

  1. What is happening internally when the typescript compiler targets ES5?
  2. Can I use ts-loader alone with tsconfig target option to achieve my goal?
  3. If so, which way is better? (ts-loader to ES6, then babel-loader to ES5, or ts-loader with target option set to ES5)
  4. What happens with tree-shaking(webpack2 feature) in both cases?
Solution

  • What is happening internally when the typescript compiler targets ES5?

    Takes you TS / ES code and transpiles it to ES5 (just like babel).

    Can I use ts-loader alone with tsconfig target option to achieve my goal?

    Yes. That is what I do.

    If so, which way is better?

    Biased opinion : https://medium.com/@basarat/typescript-won-a4e0dfde4b08

    What happens with tree-shaking(webpack2 feature) in both cases?

    Same thing. Unused exports get removed.