将node_modules中的特定包转译为es5

Question

我正在制作一个Angular 12（兼容IE）项目，其中我在node_modules中的一些依赖项是非es5的。

在我理解中，tsc不会对node_modules做任何处理，只会从angular.json中的main选项开始评估。

在寻找如何做到这一点的选项时，我看到很多建议使用babel，但我不确定

1. 我是否应该将babel与tsc混合使用。 或者我废除tsc，只通过custom-webpack使用babel？

2. 据我所了解，在所有的转译中，转译后的代码都会进入一个输出目录，但由于我需要转译node_modules中的js文件，所以这些文件的输出应该只是替换它们在node_modules中的原始文件？我们如何实现这一点？

Answer 1

您可以在tsconfig中的include中添加特定的覆盖。

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

但是当您为客户端打包时，通常不会将依赖项作为单独的脚本包含在内，而是让打包工具决定将它们放在何处。您没有提到您当前使用的打包工具，但是如果您设置了allowJS: true，则不需要Babel - 例如，对于Webpack配置的相关更改将是：

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

但是，如果您想要自动填充，使用带有Browserslist字符串的@babel/preset-env可能是最佳选择。