Angular 14 ES2020环境下Polyfills旧浏览器无效及Webpack项目问题咨询

一、CLI项目（target: ES2020）兼容Chrome 74及更早版本的有效方案 #

无需将TypeScript target降级到ES5，通过Differential Loading + Core-JS@3按需导入即可实现兼容，同时避免ES5输出警告：

1. 升级Core-JS到v3
   安装依赖：

   npm install core-js@3 regenerator-runtime --save
   

2. 修改Polyfill配置
   替换src/polyfills.ts中旧的Core-JS@2导入内容，改为：

   // 导入Core-JS稳定版和异步函数运行时
   import 'core-js/stable';
   import 'regenerator-runtime/runtime';
   
   // 可选：按需补充Chrome 74缺失的特性（自动导入覆盖不全时添加）
   import 'core-js/es/array/flat';
   import 'core-js/es/array/flat-map';
   import 'core-js/es/object/from-entries';
   import 'core-js/es/promise/all-settled';
   

3. 确认Differential Loading开启
   检查angular.json的projects.[你的项目名].architect.build配置：

   • 不要设置target: "es5"
   • 确保polyfills指向src/polyfills.ts
   • 生产环境配置中未关闭Differential Loading（默认开启）

4. 验证浏览器匹配列表
   运行npx browserslist，确认输出包含Chrome 74及更早版本（对应你的.browserslistrc配置）。

5. 重新构建
   执行构建命令后，dist目录会生成ES2020和ES5两个版本的bundle，index.html会自动通过type="module"和nomodule属性，为不同浏览器加载对应版本。

二、Webpack构建的Angular 14项目兼容方案 #

自定义Webpack配置需要手动结合Babel和Core-JS@3处理兼容：

1. 安装依赖

   npm install @babel/core @babel/preset-env babel-loader core-js@3 --save-dev
   

2. 配置Webpack规则
   在webpack.config.js中添加Babel转译规则：

   module.exports = {
     module: {
       rules: [
         // 处理TypeScript文件
         {
           test: /\.tsx?$/,
           use: [
             'ts-loader',
             {
               loader: 'babel-loader',
               options: {
                 presets: [
                   [
                     '@babel/preset-env',
                     {
                       targets: {
                         browsers: ['Chrome > 50', 'Android > 50', 'last 1 Firefox version', 'last 2 Edge major versions', 'last 2 Safari major versions', 'last 2 iOS major versions', 'Firefox ESR']
                       },
                       useBuiltIns: 'usage', // 按需导入Polyfill
                       corejs: 3, // 指定Core-JS版本
                       modules: false // 保留ES模块语法
                     }
                   ]
                 ]
               }
             }
           ],
           exclude: /node_modules/
         },
         // 处理JavaScript文件
         {
           test: /\.js$/,
           use: {
             loader: 'babel-loader',
             options: {
               presets: [
                 [
                   '@babel/preset-env',
                   {
                     targets: {
                       browsers: ['Chrome > 50', 'Android > 50', 'last 1 Firefox version', 'last 2 Edge major versions', 'last 2 Safari major versions', 'last 2 iOS major versions', 'Firefox ESR']
                     },
                     useBuiltIns: 'usage',
                     corejs: 3
                   }
                 ]
               ]
             }
           },
           exclude: /node_modules/
         }
       ]
     },
     resolve: {
       extensions: ['.tsx', '.ts', '.js']
     }
   };
   

3. 调整TypeScript配置
   在tsconfig.json中保持ES2020目标，同时开启迭代器兼容：

   {
     "compilerOptions": {
       "target": "es2020",
       "downlevelIteration": true,
       // 其他原有配置...
     }
   }
   

4. 添加全局Polyfill入口
   在项目入口文件（如main.ts）顶部导入：

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

5. 重新构建项目
   执行Webpack构建命令后，Babel会自动转译ES2020代码并按需注入Polyfill，适配旧浏览器。

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