解决 Angular 13 升级后 main-es2015.js 文件缺失问题

正如摘要所述，Angular 13 引入了构建流程的优化，其中最显著的变化之一就是默认情况下不再生成单独的 main-es2015.js 文件。 让我们深入了解一下。

Angular 13 的差分加载机制

在 Angular 13 之前，Angular CLI 会生成多个 JavaScript 包，以支持不同的浏览器环境。这被称为“差分加载”，旨在为现代浏览器提供更小、更高效的 ES2015+ 代码，同时为旧版浏览器提供兼容的 ES5 代码。

然而，Angular 团队发现，绝大多数现代浏览器已经支持 ES2015+ 特性。因此，为旧版浏览器生成单独的 ES5 包所带来的好处已经不再明显，反而增加了构建时间和复杂性。

为什么 main-es2015.js 消失了？

Angular 13 默认只生成 main.js 文件，不再区分 main-es5.js 或 main-es2015.js。这是因为现代浏览器已经足够普及，不再需要单独维护 ES5 版本。

tsconfig.json 中的 target 和 module 配置仍然有效，但它们的影响已经发生了变化。

• target: “es2015” 或更高版本：Angular CLI 会生成 ES2015+ 代码，并将其打包到 main.js 中。
• module: “esnext” 或其他模块格式：Angular CLI 会使用指定的模块格式来组织代码。

如何处理旧版浏览器支持？

如果你的应用仍然需要支持非常旧的浏览器，可以考虑以下方法：

1. Polyfills: 使用 polyfills 来为旧版浏览器提供缺失的 JavaScript 特性。可以在 src/polyfills.ts 文件中导入所需的 polyfills。

   import 'core-js/es/promise'; // For IE 11
   import 'core-js/es/array'; // For IE 11

2. browserslist 配置: 使用 browserslist 文件（通常位于项目根目录）来指定目标浏览器。Angular CLI 会根据 browserslist 配置自动应用必要的转换和 polyfills。

   # .browserslistrc
   > 0.5%
   last 2 versions
   not dead
   IE 11 # Include IE 11 support

3. 手动构建 ES5 版本 (不推荐): 虽然不推荐，但仍然可以通过修改 angular.json 和 tsconfig.json 来手动配置 ES5 构建。 这通常涉及创建单独的构建配置，并使用不同的 TypeScript 编译器选项。 这种方法会显著增加构建时间和维护成本。

总结

Angular 13 移除 main-es2015.js 文件是构建优化的重要一步。它简化了构建流程，缩短了构建时间，并减少了不必要的代码冗余。 如果你需要支持旧版浏览器，请使用 polyfills 和 browserslist 配置来确保兼容性。 尽量避免手动构建 ES5 版本，因为它会增加复杂性和维护成本。 理解这些变化将帮助你更好地构建和维护 Angular 13 应用。