使用 webpack 导入 vis.js [英] Import vis.js with webpack

问题描述

我想在使用 ES6 的 Webpack 应用程序中从 vis.js 导入 only DataSet 和 Network模块.

I would like to import only DataSet and Network from vis.js in our Webpack application using ES6 modules.

一种简单的方法是导入 dist/vis-network.min.js 但它已经被缩小了，所以与我们的 webpack 工作流程不太兼容.

One easy way to do it is to just import dist/vis-network.min.js but it's already minified so not very compatible with our webpack workflow.

我查看了 vis.js 代码，它没有使用 ES6 模块，因此我无法导入它们.

I had a look at the vis.js code and it's not using ES6 modules so I can't import them.

是否有更简单的方法然后执行 自定义 vis.js 构建?

Is there a simpler way then doing a custom vis.js build?

推荐答案

可以使用 vis.js 创建自己的包.

There is ability to create your own packs with vis.js.

为了做到这一点，你应该:

For doing it you should:

打开文件 gulpfile.js 并将配置添加到 INDIVIDUAL_BUNDLES.

Open file gulpfile.js and add config to 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 添加了配置，但未缩小.

There added config for vis-graph3d not minified.

对于非迷你网络，我假设配置为:

For not mini network, I assume config will be:

 {entry: './index-network.js', filename: 'vis-network.js', 'notMini': true},

或者您可以编写自己的包.

Or you can write your own bundle.

更改文件后，您应该立即进行构建(请参阅 README.md):

After change file your should make build (see README.md) shortly:

$ cd vis
$ npm install
$ npm run build

在 dist 文件夹之后，您可以找到 vis-network.js.

After in dist folder you can find vis-network.js.

这篇关于使用 webpack 导入 vis.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！