导入jsPDF导致角度优化救助警告

Question

我对 Angular 构建相当陌生，我正在开发一项功能，我想下载/打印 PDF 格式的报告。我使用 npm 安装了包 jsPDF 和 jsPDF-autotable 将 json 数据转换为 pdf，但同时在组件中导入并提供 Angular 项目

import { jsPDF } from 'jspdf';
import autoTable from 'jspdf-autotable';

它给出以下警告：

Warning: \node_modules\canvg\lib\index.es.js depends on 'raf'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: \node_modules\canvg\lib\index.es.js depends on 'core-js/modules/es.string.match.js'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: \node_modules\canvg\lib\index.es.js depends on 'core-js/modules/es.string.replace.js'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: \node_modules\canvg\lib\index.es.js depends on 'core-js/modules/es.promise.js'. CommonJS or AMD dependencies can cause optimization bailouts.    
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: \node_modules\canvg\lib\index.es.js depends on 'core-js/modules/es.string.starts-with.js'. CommonJS or AMD dependencies can cause optimization bailouts.

Warning: \node_modules\canvg\lib\index.es.js depends on 'core-js/modules/es.array.iterator.js'. CommonJS or AMD dependencies can cause optimization bailouts.

Warning: \node_modules\canvg\lib\index.es.js depends on 'core-js/modules/es.array.reduce.js'. CommonJS or AMD dependencies can cause optimization bailouts.

Warning: \node_modules\canvg\lib\index.es.js depends on 'core-js/modules/web.dom-collections.iterator.js'. CommonJS or AMD dependencies can cause optimization bailouts.

Warning: \node_modules\canvg\lib\index.es.js depends on 'core-js/modules/es.string.ends-with.js'. CommonJS or AMD dependencies can cause optimization bailouts.

Warning: \node_modules\canvg\lib\index.es.js depends on 'core-js/modules/es.string.split.js'. CommonJS or AMD dependencies can cause optimization bailouts.

Warning: \node_modules\canvg\lib\index.es.js depends on 'core-js/modules/es.string.trim.js'. CommonJS or AMD dependencies can cause optimization bailouts.

Warning: \node_modules\canvg\lib\index.es.js depends on 'core-js/modules/es.array.index-of.js'. CommonJS or AMD dependencies can cause optimization bailouts.

Warning: \node_modules\canvg\lib\index.es.js depends on 'core-js/modules/es.string.includes.js'. CommonJS or AMD dependencies can cause optimization bailouts.

Warning: \node_modules\canvg\lib\index.es.js depends on 'core-js/modules/es.array.reverse.js'. CommonJS or AMD dependencies can cause optimization bailouts.

Warning: \node_modules\canvg\lib\index.es.js depends on 'core-js/modules/es.regexp.to-string.js'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: \node_modules\canvg\lib\index.es.js depends on 'raf'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

我浏览了很多网页，但没有得到正确的解决方案。 不想在 angular.json 中的 allowedCommonJsDependency 选项中添加库，因为它只是抑制警告。

我正在使用角度构建：

"@angular/cli": "^11.2.14",
"jspdf": "^2.5.1",
"jspdf-autotable": "^3.5.28"

我该如何解决这个问题？

• 我应该继续处理此警告并将代码推送到生产环境吗？或
• 由于我没有使用

  addSvgAsImage

  功能，我应该转向自定义 webpack 构建并将 canvg、raf 等库移至 externals？或
• 我应该尝试使用其他库，例如pdfmake吗？

Answer 1

我也面临同样的问题，我通过这样做解决了它

"allowedCommonJsDependencies": [
          "jspdf-autotable",
          "raf",
          "core-js"
        ]

使用以下内容更新 angular.json，您将不会收到这些警告，请阅读更多内容优化救助官方文档

Answer 2

问题出在 canvg 端（或 core-js），而不是 jsPDF 端。 Canvg 正在导入 core-js，它具有 commonjs 依赖项。如果您不使用

addSvgAsImage

函数，您可以将 canvg 标记为外部（请参阅自述文件）。另请参阅#2976。

顺便说一句，使用 Angular 的新构建系统（基于 ESBuild），您只需将属性“externalDependency”添加到您的 angular.json 构建配置中。

{ "projects": { "projectName": { "architect": {
 ...,
 "build": {
   ...,
   "configurations": {
     ...,
     "production": {
       ...,
       "externalDependencies": ["canvg", "dompurify", "html2canvas"]
     }
   }
 }
}}}}

https://github.com/parallax/jsPDF/issues/3144#issuecomment-2404498026