在 React 组件和 browserify 包中加载带有插件的 jQuery

Question

我已经在我能想到的每个搜索引擎和 IRC 房间上检查了这个问题，并且还试图了解 jQuery 中的模块加载代码和我想使用的插件（DataTables）发生了什么。有一些链接 here 和 here 解释了它应该如何工作，但没有示例，我无法理解。

这是 jQuery-DataTables 插件顶部/底部的代码：

(/** @lends <global> */function( window, document, undefined ) {

(function( factory ) {
    "use strict";

    if ( typeof define === 'function' && define.amd ) {
        // Define as an AMD module if possible
        define( 'datatables', ['jquery'], factory );
    }
    else if ( typeof exports === 'object' ) {
        // Node/CommonJS
        module.exports = factory( require( 'jquery' ) );
    }
    else if ( jQuery && !jQuery.fn.dataTable ) {
        // Define using browser globals otherwise
        // Prevent multiple instantiations if the script is loaded twice
        factory( jQuery );
    }
}
(/** @lends <global> */function( $ ) {

    // plugin code...

    return $.fn.dataTable;
}));

}(window, document));

在我的 React 组件中：

var React = require('react');
var $ = require('jquery');
var dataTable = require('datatables');
var Table = React.createClass({
  componentDidMount () {
    var node = React.findDOMNode(this);
    var table = $(node).DataTable({
      //options
    });
    console.log(table); // to see what the table is
  },
  render () {
    return (
      <div>
        <table className="table">
        </table>
      </div>
    );
  }
});
module.exports = Table;

我还尝试了另一种方法：

var table = $.fn.dataTable.Api(node)

这也不起作用。第一种方法让我得到Uncaught TypeError: Cannot read property 'nTable' of null，第二种方法让我得到undefined。

还有一堆关于类似情况的 SO 问题（没有足够的声誉来发布更多链接，抱歉），但还没有人给出一个可行的例子的答案。谁能解释一下模块加载器代码在做什么，以便我们了解如何让它工作，或者更好的是，一个工作示例？

谢谢！

Answer 1

模块加载器代码在称为 UMD 的东西中定义模块，这意味着通用模块定义。这是一种公开与模块系统无关的模块的方法。该代码检查它是否在 CommonJS、AMD 或全局变量中使用，并与您正在使用的代码挂钩。

我无法真正说出这里发生了什么，但我看到的一件事是您需要jquery/dist/jquery，而插件只需要jquery。这意味着您最终将在您的包中获得两个不同的 jQuery 版本，并且该插件在您未使用的 jQuery 上注册。你应该像插件一样只需要jquery，然后在你的包上运行缩小作为构建步骤。