Я хотел бы импортировать толькоDataSet и Network от vis.js в нашем приложении WebPack с использованием модулей ES6.Импорт vis.js с WebPack
Один простой способ сделать это - просто импортировать dist/vis-network.min.js, но он уже включен, поэтому он не очень совместим с нашим рабочим процессом webpack.
Я взглянул на код vis.js, и он не использует модули ES6, поэтому я не могу их import.
Есть ли более простой способ, чем делать custom vis.js build?
Это не только возможно, но и рекомендуется импортировать только те части vis.js, которые вы хотите использовать в своем приложении. Это позволяет загружать только те части vis.js, которые вам понадобятся в вашем проекте.
Существует not much documentation по этой теме, но есть demo project, который показывает, как выборочно импортировать детали vis.js с помощью webpack.
Существует возможность создавать свои собственные пакеты с vis.js.
Для делать это необходимо:
Открыть файл gulpfile.js и добавить к конфигурации INDIVIDUAL_BUNDLES.
Например:
var INDIVIDUAL_BUNDLES = [
{entry: './index-timeline-graph2d.js', filename: 'vis-timeline-
graph2d.min.js'},
{entry: './index-network.js', filename: 'vis-network.min.js'},
{entry: './index-graph3d.js', filename: 'vis-graph3d.min.js'},
{entry: './index-graph3d.js', filename: 'vis-graph3d.js', 'notMini':
true}
];
Там добавили конфигурации для Vis-graph3d не минимизированы.
Для не мини-сети, я предполагаю, что конфигурация будет:
{entry: './index-network.js', filename: 'vis-network.js', 'notMini': true},
Или вы можете написать свой собственный комплект.
После изменения файла вам следует сделать сборку (см README.md) коротко:
$ cd vis
$ npm install
$ npm run build
После того как в DIST папке вы можете найти Vis-network.js.
Вы нашли решение на этом? – JohnnyQ
@JohnnyQ Я просто настроил файл gulp. –
Webpack теперь поддерживает синтаксис модуля commonjs, amd и es6. См. Здесь пример: https://github.com/webpack/webpack/tree/master/examples/mixed – Kurren