将 jsPlumb 与 Webpack React 结合使用

Question

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

Uncaught TypeError: jsPlumb.getRenderModes is not a function.

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

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

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

的就绪方法时出现错误

Uncaught TypeError: _jsPlumb2.default.ready is not a function

__jsPlumb2.default 正在返回一个空对象。有人可以让我知道如何将 jsPlumb 与 webpack 一起使用吗？

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"

但是，在访问它的 methods/properties 之前，我们应该先看看 jsPlumb 由什么组成。当断言 console.log("jsPlumb :", jsPlumb) 语句时，我们可以看到 jsPlumb 由几个属性组成；其中之一就是 jsPlumb 本身。所以，为了访问它的methods/properties，我们必须这样写：

jsPlumb.jsPlumb.someMethods

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

jsPlumb = jsPlumb.jsPlumb

因此，我们可以使用正常的语法来访问它的 methods/properties :

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

Answer 3

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

import { jsPlumb } from 'jsplumb';

将 jsPlumb 与 Webpack React 结合使用

Using jsPlumb with Webpack React

jquery

jsplumb

reactjs

webpack