Angular 12兼容IE：如何转译node_modules中的非ES5依赖？

关于Babel与TSC的选择 #

别弃用TSC，Angular的核心编译逻辑和类型检查严重依赖TSC，直接换掉会导致Angular特有的语法（比如装饰器、依赖注入语法）无法正确处理。正确的做法是TSC+Babel混合使用：

• TSC负责编译你的项目TypeScript代码，处理类型检查、Angular专属语法转译；
• Babel仅用来转译node_modules中不符合ES5规范的JS文件，弥补TSC不处理node_modules的短板。

转译node_modules文件的正确姿势 #

绝对不要替换node_modules里的原文件——一来依赖包更新或重新install会覆盖你的修改，二来破坏了依赖的完整性和可追溯性。正确的做法是构建时动态转译，在webpack打包流程中完成转译，直接把转译后的代码打包进最终bundle，不需要生成中间文件。

具体实现步骤 #

• 安装依赖：

npm install @angular-builders/custom-webpack babel-loader @babel/core @babel/preset-env core-js@3 --save-dev

• 修改angular.json配置：
  找到项目的build配置，把默认的@angular-devkit/build-angular:browser替换为@angular-builders/custom-webpack:browser，并添加customWebpackConfig指定自定义配置文件路径：

"architect": {
  "build": {
    "builder": "@angular-builders/custom-webpack:browser",
    "options": {
      "customWebpackConfig": {
        "path": "./custom-webpack.config.js"
      },
      // 其他原有配置...
    }
  },
  "serve": {
    "builder": "@angular-builders/custom-webpack:dev-server"
  }
}

• 创建custom-webpack.config.js：
  配置babel-loader仅处理你需要转译的node_modules包（把下面的package1、package2换成实际需要转译的依赖名）：

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        // 只匹配需要转译的依赖包
        include: /node_modules\/(package1|package2)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              ['@babel/preset-env', {
                targets: { ie: '11' },
                useBuiltIns: 'usage',
                corejs: 3
              }]
            ]
          }
        }
      }
    ]
  }
};

• 补充polyfills：
  在src/polyfills.ts中添加IE必需的polyfill：

import 'core-js/stable';
import 'regenerator-runtime/runtime';

这样配置后，执行ng build或ng serve时，webpack会自动用Babel转译指定的node_modules依赖，再和TSC编译后的项目代码一起打包，最终产物就能兼容IE11了。

内容的提问来源于stack exchange，提问作者Ashish Ranjan