Angular 10+ 中修复 CommonJS 或 AMD 依赖优化警告

问题描述

在将 Angular 9 应用程序升级到 Angular 10 或更高版本时，控制台可能会显示如下警告：

rxjs\BehaviorSubject.js depends on rxjs-compat/BehaviorSubject

这个警告是由于 Angular 10 引入的新功能 - 当构建过程中包含 CommonJS 或 AMD 模块时会发出警告，因为这些模块可能导致应用程序优化失败，产生更大的包体积和更慢的加载速度。

根本原因

Angular 10 开始对 CommonJS 模块进行检测，因为它们：

阻止打包工具进行树摇（tree-shaking）优化
导致生成的包体积增大
影响应用程序性能

解决方案

方案一：修复导入路径（推荐）

最常见的解决方案是修正 rxjs 的错误导入方式：

不推荐的导入方式：

typescript

import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { BehaviorSubject } from 'rxjs/internal/BehaviorSubject';
import { catchError, retry } from 'rxjs/internal/operators';
import { flatMap } from 'rxjs/internal/operators';

推荐的导入方式：

typescript

import { BehaviorSubject } from 'rxjs';
import { catchError, retry, mergeMap } from 'rxjs/operators';

重要提示

从 'rxjs/internal/*' 导入改为从 'rxjs' 或 'rxjs/operators' 导入
flatMap 操作符已弃用，应使用 mergeMap 替代
检查并更新所有rxjs相关导入

方案二：配置允许的 CommonJS 依赖

如果不能立即修复所有导入问题，可以临时将依赖添加到白名单：

json

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

注意

这只是一个临时解决方案，长期来看应该修复导入问题以获得更好的应用性能。

方案三：使用自动化脚本

对于大型项目，手动修复所有导入可能很繁琐。可以使用自动化脚本：

bash

# 使用Python脚本批量替换导入
python3 replace_imports.py PATH_TO_SRC_DIR

示例脚本功能

此脚本可以将类似以下模式的导入：

rxjs/(internal|Observable|Subject|ReplaySubject|Subscription|BehaviorSubject)

替换为：

import { * } from 'rxjs'

其他常见情况

除了 rxjs，其他 CommonJS 依赖也可能导致此问题。如果看到类似 x depends on y 的警告，只需将 y 添加到 allowedCommonJsDependencies 数组中。

json

"allowedCommonJsDependencies": [
  "rxjs-compat",
  "ngx-google-places-autocomplete",
  "other-commonjs-dependency"
]

最佳实践建议

优先修复导入：使用正确的 ES 模块导入方式是长久之计
逐步迁移：对于大型项目，可以先配置白名单，然后逐步修复导入
检查第三方库：确保使用的第三方库也提供了 ES 模块版本
定期审查：定期检查构建输出，识别并处理新的 CommonJS 依赖

总结

Angular 10+ 的 CommonJS 依赖警告是为了帮助开发者构建更优化的应用程序。通过修正导入路径或配置允许的依赖，可以轻松解决这些问题。建议优先采用修正导入的方式，以获得更好的应用性能和更小的包体积。

相关文章

Angular 10+ 中修复 CommonJS 或 AMD 依赖优化警告 ​

问题描述 ​

根本原因 ​

解决方案 ​

方案一：修复导入路径（推荐） ​

方案二：配置允许的 CommonJS 依赖 ​

方案三：使用自动化脚本 ​

其他常见情况 ​

最佳实践建议 ​

总结 ​