Импорт vis.js с помощью веб-пакета

Question

Я хотел бы только импортироватьDataSet а также Network от vis.js в нашем приложении Webpack с использованием модулей ES6.

Один из простых способов сделать это - просто импортировать dist/vis-network.min.js но он уже минифицирован, поэтому не очень совместим с нашим рабочим процессом webpack.

Я посмотрел на код vis.js, и он не использует модули ES6, поэтому я не могу import их.

Есть ли более простой способ, чем создание пользовательской сборки vis.js?

Answer 1

Существует возможность создавать свои собственные пакеты с помощью 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.

Answer 2

Не только возможно, но и рекомендуется импортировать только те части vis.js, которые вы хотите использовать в своем приложении. Это позволяет вам загружать только те части vis.js, которые вам понадобятся в вашем проекте.

По этой теме не так много документации, но есть демонстрационный проект, который показывает, как выборочно импортировать части vis.js с помощью веб-пакета.