Question

我想将jsPlumb添加到我的webpack-build js-app（ReactJS）。我正在使用jsPlumb v2.0.7。当我们与webpack捆绑时，它会抛出错误

未捕获的TypeError：jsPlumb.getRenderModes不是函数。

我能够通过使用导入和脚本加载器解决上述问题，我的webpack配置加载器看起来像，

{
    test: require.resolve('jsplumb'),
    loaders: [
      'imports?this=>window',
      'script'
     ]
 }

现在，我无法访问任何jsPlumb方法，webpack无法解决此问题。当我使用jsPlumb

的ready方法时，我收到错误

未捕获的TypeError：_jsPlumb2.default.ready不是函数

__jsPlumb2.default正在返回一个空对象。有人可以告诉我如何在webpack中使用jsPlumb吗？

Answer 1

我找到了上述问题的解决方案，在此发布，认为将来可能会帮助其他人。

我使用过ES6 import语句，

import jsPlumb from 'jsPlumb'

相反，如果我使用

import jsplumb from 'jsplumb'

它解决了问题，jsPlumb可用作全局对象，因为我们在webpack中使用了导入和脚本加载器。

Answer 2

以下每种方式对我有效：

import jsPlumb from "jsPlumb"

import jsPlumb from "jsplumb/dist/js/jsplumb"

import jsPlumb from "jsplumb/dist/js/jsplumb.min"

但是，在访问其方法/属性之前，我们应该看一下jsPlumb的组成。在声明console.log（“ jsPlumb：”，jsPlumb）语句时，我们可以看到jsPlumb包含多个属性；其中之一就是jsPlumb本身。因此，为了访问其方法/属性，我们必须这样写：

jsPlumb.jsPlumb.someMethods

如果我们想使用简短的语法，可以像这样设置jsPlumb变量：

jsPlumb = jsPlumb.jsPlumb

因此，我们可以使用常规语法来访问其方法/属性：

jsPlumb.ready(function () {..})
jsPlumb.getInstance()

Answer 3

在 ES6 中，您应该使用以下导入语句来使用文档中的语法

import { jsPlumb } from 'jsplumb';