Angular 10 升级 - 修复 CommonJS 或 AMD 依赖项可能导致优化救助

Question

我正在尝试将我的 Angular 9 应用程序升级到 Angular 10 版本，但升级后低于警告

WARNING in calendar.reducer.ts depends on lodash/keys. CommonJS or AMD dependencies can cause optimization bailouts.

我已将以下行添加到我的 angular.json 文件中，但问题未解决

"allowedCommonJsDependencies": ["lodash"]

如何解决上述问题。

Answer 1

npm 包 lodash 本身不是 ECMAScript 模块，因此会产生警告。 有多种方法可以解决此问题：

替换为ES模块化库（推荐）

一些库提供 ES 模块化构建。如果是 lodash，您可以将其替换为 lodash-es。

运行 npm install --save lodash-es.

现在用 lodash-es 替换所有从 lodash 导入的内容。

还要确保使用 ES 导入语句导入库：

import { keys } from 'lodash-es';

白名单 CommonJS 依赖项

如果没有可用于您的库的 ES 模块化构建，或者如果您出于某种原因不关心，您可以在 angular.json 文件中允许特定的 CommonJS 依赖项：

"architect": {
  "build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
      "allowedCommonJsDependencies": ["lodash"]
    }
  }
}

Since Angular CLI Version 10.0.1 you can use globs in allowedCommonJsDependencies. This means that if you pass lodash, the sub-paths (e.g. lodash/keys) will also be allowed.

文档参考：https://angular.io/guide/build#configuring-commonjs-dependencies