Translate specific packages in node_modules to es5

Question

I'm making an Angular 12 (IE compatible) project where some of my dependencies in node_modules are non-es5.

In my understanding, tsc will not do any processing on node_modules, but will only retrieve main from angular.json ;Option starts evaluation.

While looking for options on how to do this, I saw a lot of suggestions to use babel, but I'm not sure

1. Should I mix babel with tsc. Or do I do away with tsc and just use babel via custom-webpack?

2. As I understand it, in all transpilations, the transpiled code goes into an output directory, but since I need to transpile the js files in node_modules, the output of these files should just replace them in Original files in node_modules? How do we achieve this?

Answer 1

You can add specific overrides in include in tsconfig.

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

But when you package for the client, you usually don't include the dependencies as separate scripts, but let the packaging tool decide where to put them. You didn't mention what packaging tool you're currently using, but if you set allowJS: true, Babel is not required - for example, the relevant changes to the Webpack config would be:

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

However, if you want autofill, using @babel/preset-env with a Browserslist string is probably the best option.