与webpack一起进口vis.js

Question

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

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

我看了一下vis.js代码，它没有使用ES6模块，所以我不能使用它们。

有比做自定义vis.js构建更简单的方法吗？

Answer 1

不仅可以而且鼓励只导入您想要在应用程序中使用的vis.js的部分。这允许您只加载项目中需要的vis.js部分。

有关于这个主题的文件不多，但是有一个演示项目展示了如何使用webpack有选择地导入vis.js的一部分。

Answer 2

有能力用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。