导入cytoscape.js作为ESM模块

Question

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

要在具有npm的ESM环境中使用Cytoscape.js（例如Webpack或 带有ESM软件包的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

跟踪我的所有依赖项

Answer 1

我前一段时间在Google上进行了搜索，发现尚不支持打字稿。因此，我进行了与您相同的导入，并向angular.json中添加了cytoscape：projects.yourprojectname.architect.build.options.allowedCommonJSDependencies，如下所示：

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