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

Posted 2023-03-08

【中文标题】在 React 组件和 browserify 包中加载带有插件的 jQuery

【英文标题】：Loading jQuery with plugins in a React component and browserify bundle

【发布时间】：2015-07-05 12:22:36

【问题描述】：

我已经在我能想到的每个搜索引擎和 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 问题（没有足够的声誉来发布更多链接，抱歉），但还没有人给出一个可行的例子的答案。谁能解释一下模块加载器代码在做什么，以便我们了解如何让它工作，或者更好的是，一个工作示例？

谢谢！

【问题讨论】：

没有模块加载器可以工作吗？

【参考方案1】：

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

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

【讨论】：

啊，你是对的，但我尝试了很多很多东西，jquery/dist/jquery 只是我最终复制到这里的那个。我将其改回jquery，因为结果完全相同..