将 jsPlumb 与 Webpack React 一起使用答案

【问题标题】：Using jsPlumb with Webpack React将 jsPlumb 与 Webpack React 一起使用
【发布时间】：2016-10-09 14:33:52
【问题描述】：

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

未捕获的类型错误：jsPlumb.getRenderModes 不是函数。

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

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

现在，我无法访问任何jsPlumb 方法，webpack 无法解决它。当我使用 jsPlumb 的 ready 方法时出现错误

未捕获的类型错误：_jsPlumb2.default.ready 不是函数

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

【问题讨论】：

【解决方案1】：

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

import { jsPlumb } from 'jsplumb';

【讨论】：

【解决方案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()

【讨论】：

【解决方案3】：

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

我曾经使用过 ES6 的 import 语句，

import jsPlumb from 'jsPlumb'

相反，如果我使用

import jsplumb from 'jsplumb'

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

【讨论】：