Блог

Главная - Вопросы по программированию - Импорт cytoscape.js как модуль ESM

Импорт cytoscape.js как модуль ESM

#angular #cytoscape.js

#angular #cytoscape.js

Вопрос:

Я использую cytoscape.js в приложении Angular 10. Документация cytoscape.js говорит

Чтобы использовать Cytoscape.js в среде ESM с npm (например, Webpack или Node.js с пакетом ESM): import cytoscape from 'cytoscape';

Я импортирую его, как import cytoscape from 'cytoscape'; в моем файле typescript.

Но я вижу предупреждения

Зависимости CommonJS или AMD могут привести к сбоям в оптимизации.

Итак, я перехожу в node_modulescytoscapedist папку. Я вижу, что есть много импортируемых файлов.

введите описание изображения здесь

Я помещаю console.log в каждый из них. Затем я вижу, что я использую cytoscape.cjs.js , что означает, что я использую файл commonjs.

Я мог бы скопировать cytoscape.esm.min.js и импортировать его вручную, но есть ли лучший способ? Было бы лучше отслеживать все мои зависимости от package.json

Ответ №1:

Я некоторое время назад искал это в Google и обнаружил, что пока нет поддержки typescript. Итак, я просто выполнил тот же импорт, что и вы, и добавил cytoscape в angular.json: projects.yourprojectname.architect.build.options.Разрешенные общие зависимости, подобные этому:

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

Комментарии:

1. На самом деле, есть поддержка typescript, но, я думаю, она не официальная. npmjs.com/package/@types/cytoscape Кроме того, cytoscape.js работает так var cy = cytoscape({ container: document.getElementById('cy') // container to render in }); , что он собирает всю свою функциональность в одном объекте, я думаю, даже если мы импортируем его как модуль ESM, это не сильно улучшит производительность. Это улучшило бы производительность, если cytoscape.js был более модульным, так что мы могли просто импортировать или не импортировать несколько вещей. Спасибо за ответ.

2. Поддержка Typescript поможет понять результат вызовов и все второстепенные объекты (коллекции cytoscape, узлы и т. Д.). Я собираюсь взглянуть на typedefs.

3. typescript определенно сделает вещи более понятными

4. Хм, когда я устанавливаю это, мои import cytoscape from 'cytoscape'; перерывы.

5. Возможно, вам придется использовать ‘cytoscape/dist/cytoscape.esm.js «. Поле ‘module’ не может быть обновлено в package.json проекта в версии v3, так как это нарушит работу Webpack. См. js.cytoscape.org/#getting-started/including-cytoscape.js