角度依赖使用 fesm2015 而不是 fesm2020

Question

在我的 Angular 13 项目中，我有一个 npm 依赖项，其中包含fesm2020和fesm2015模块：请参阅package.json

  "module": "fesm2015/ds-components.mjs",
  "es2020": "fesm2020/ds-components.mjs",
  "esm2020": "esm2020/ds-components.mjs",
  "fesm2020": "fesm2020/ds-components.mjs",
  "fesm2015": "fesm2015/ds-components.mjs",

当我服务角度项目时，fesm2020使用该模块。经过大量调试后，我发现该fesm2020模块有奇怪的行为，但该fesm2015模块可以工作。我如何告诉 Angular 使用该fesm2015模块？

Answer 1

因此，首先，在 Angular 14之前，您可以使用 tsconfig.json 控制部分降级。从 Angular 14 开始，它将由 browserlist 控制 。因此，对于 Angular 13 应用程序，最好的方法是使用自定义 webpack config。因为 Angular 团队不允许覆盖 webpack 配置，所以你可能想使用这个（它将应用于 Angular）

额外的 webpack.config.ts

import { Configuration } from 'webpack';

export default {
  resolve: {
    conditionNames: ['es2020', 'es2015', '...'],
    // conditionNames: ['es2015', '...'],
  },
} as Configuration;

你可以查看我创建的演示

1. 克隆并运行 npm I
2. 运行 npm 运行启动
3. 打开浏览器控制台 - 将显示 FESM2020
4. 停止构建，删除根目录中包含缓存文件的.angular 文件夹
5. 修改 extra-webpack.config.ts 以仅允许 es2015
6. 重复步骤2-3，您将看到FESM2015