Transpile specific packages in node_modules to es5

Question

I have(making) an Angular 12 (IE-compatible) project where a few of my dependencies in node_modules are non es5.

In my understanding tsc doesn't do anything with node_modules and just starts to evaluate from main option present in angular.json.

While looking for options on how to do that, I see a lot of suggestions using babel, I am not sure

1. If I should mix babel with tsc. Or I abolish tsc and just use babel through custom-webpack?

2. From what I understand, In all the transpilations, the transpiled code goes to an Output directory, but since I have a need to transpile js in node_modules, the output for those files should just be a replacement for their originals in node_modules? how do we achieve that?

Answer 1

You can add specific overrides in include in your tsconfig.

"include": [
  "src/**/*",
  "node_modules/foo/index.ts",
  "node_modules/bar/quux.baz.mjs"
]

But when you bundle for the client, usually you're not including dependencies as separate scripts, you're letting your bundler figure out where to put them. You didn't mention how you're bundling currently, but you still don't need Babel if you have allowJS: true — for example, the relevant change to a Webpack config would be

{
  test: /\.(js|ts)$/,
  exclude: /node_modules\/(?!(foo|bar)\/).*/, // this line

However if you want automatic polyfills, @babel/preset-env with a Browserslist string is likely the best option.