Angular 差异加载 - 如何只生成一个 polyfill.js 文件

Question

我们刚刚从 angular 7 迁移到 angular 9。我的应用程序面向更多的受众，我需要支持 IE-11 等旧版浏览器。因此，我在 tsconfig.json

中进行了以下更改

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "module": "esnext",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

目标设置为

"target": "es5",

如前所述，它将针对旧版浏览器Here，它将生成如下所示的构建工件

但是如果你仔细看，会生成两个polyfill，

chunk {2} polyfills.js (polyfills) 46.5 kB [initial] [rendered]
chunk {3} polyfills-es5.js (polyfills-es5) 129 kB [initial] [rendered]

但我只想生成一个同时支持现代和旧版浏览器的 polyfill。 有没有办法像 angular 8+ 之前那样只生成一个 polyfill (polyfills.js) 文件？

Answer 1

编辑：下面的解决方案有点老套，我建议使用一些 post 构建过程来删除您不需要的文件。

要按照 angular 8 之前的方式构建，即完全消除差异加载（即使对于 polyfill），您需要：

在您的 tsconfig.json 文件中将 target 设置为 es5
在您的 browserslist 文件中注释所有查询，该文件通常位于项目的根目录
安装core-js节点模块
将 core-js 导入添加到您的 polyfill.ts，就像在 angular 7

注意：删除browerslist文件不起作用，因为它仍会生成 2 个 polyfill 包

浏览器列表文件

# You can see what browsers were selected by your queries by running:
#   npx browserslist
#> 0.5%
#last 2 versions
#Firefox ESR
#dead
#IE 9-11 # For IE 9-11 support, remove 'not'.

polyfill.ts

/****************************
 * BROWSER POLYFILLS
 */

import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';

Angular 差异加载 - 如何只生成一个 polyfill.js 文件

Angular Differential loading - How to generate only one polyfill.js file

angular

angular8

angular9