时间戳

首页 > 解决方案 > 导入 cytoscape.js 作为 ESM 模块

angular - 导入 cytoscape.js 作为 ESM 模块

问题描述

我在 Angular 10 应用程序中使用cytoscape.js 。cytoscape.js 的文档说

要在带有 npm 的 ESM 环境中使用 Cytoscape.js（例如带有 ESM 包的 Webpack 或 Node.js）：import cytoscape from 'cytoscape';

import cytoscape from 'cytoscape';我像在我的打字稿文件中一样导入它。

但我看到警告

CommonJS 或 AMD 依赖项可能会导致优化救助。

所以我去node_modules\cytoscape\dist文件夹。我看到有很多可导入的文件。

在此处输入图像描述

我给console.log他们每一个。然后我看到我正在使用cytoscape.cjs.js这意味着我正在使用 commonjs 文件。

我可以手动复制cytoscape.esm.min.js和导入它，但有更好的方法吗？最好跟踪我的所有依赖项package.json

标签： angularcytoscape.js

解决方案

我前一阵子用谷歌搜索过，发现还没有对打字稿的支持。所以我只是做了和你一样的导入，并将 cytoscape 添加到 angular.json：projects.yourprojectname.architect.build.options.allowedCommonJSDependencies，如下所示：

 "allowedCommonJsDependencies": [
              "cytoscape",
              "cytoscape-popper",
              "lodash",
              "lodash/cloneDeep"
            ]

推荐阅读