Angular 10升级-修复CommonJS或AMD依赖项可能导致优化援助 [英] Angular 10 Upgrade - Fix CommonJS or AMD dependencies can cause optimization bailouts

问题描述

我正在尝试将我的angular 9 ap升级到angular 10版本，但是升级后低于警告

I am trying to upgrade my angular 9 ap to angular 10 version, but getting below warning after the upgrade

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

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

I have added below line to my angular.json file but issue is not resolved

"allowedCommonJsDependencies": ["lodash"]

如何解决以上问题.

推荐答案

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

The npm package lodash itself is not an ECMAScript module and therefore produces the warning. There are multiple ways to fix this:

某些库提供ES调制的版本.如果是lodash，则可以将其替换为 lodash-es .

Some libraries offer ES modulized builds. In case of lodash, you can replace it with lodash-es.

运行npm install --save lodash-es.

现在将所有从lodash导入的内容替换为lodash-es.

Now replace all imports from lodash with lodash-es.

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

Also make sure to import the library with ES import statements:

import { keys } from 'lodash-es';

将CommonJS依赖项列入白名单

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

Whitelist CommonJS dependency

If there is no ES modulized build available for your library, or if you for some reason don't care, you can add can allow specific CommonJS dependencies in the angular.json file:

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

自Angular CLI版本10.0.1起，您可以在allowedCommonJsDependencies中使用glob. 这意味着，如果您通过lodash，则子路径(例如lodash/keys)也将被允许.

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.

这篇关于Angular 10升级-修复CommonJS或AMD依赖项可能导致优化援助的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！