javascript - Browserify with jQuery >= 2 产生 "jQuery requires a window with a document"

Question

我正在使用 browserify 通过 CommonJS 样式的依赖项来捆绑我的前端 javascript。例如，我有:

$ = require('jquery/dist/jquery');  // v2.1.0-beta2                                                                                                                                                                       
_ = require('underscore');                                                                                                                                                                                 
Backbone = require('backbone');

但是，当 browserify 捆绑依赖项时，我遇到了以下控制台错误:

Error: jQuery requires a window with a document

查看 jQuery 代码，我发现它正在尝试将 this 用于全局 window。

(function( window, factory ) {
....
}(this, function( window ) {

由于 browserify 包装了所有依赖项，this 是一个object，而不是 window。

有趣的是 jQuery >= 2 应该是 CommonJS 兼容的。然而，问题在于 browserify 如何包装依赖项。有人解决过这个问题吗？

Answer 1

TL;DR;

在您的情况下，它应该像使用一样简单；

$ = require('jquery/dist/jquery')(window);  // v2.1.0-beta2  

这可能是显而易见的；但是你必须在你使用的每个模块中使用这种形式的声明(将 window 传递给 require 的结果)，而不仅仅是一个/第一个，等等。

---

非 TL;DR;

对于任何想知道原因的人来说，处理这个问题的 jQuery 中有趣的代码是；

(function( window, factory ) {

    if ( typeof module === "object" && typeof module.exports === "object" ) {
        // Expose a jQuery-making factory as module.exports in loaders that implement the Node
        // module pattern (including browserify).
        // This accentuates the need for a real window in the environment
        // e.g. var jQuery = require("jquery")(window);
        module.exports = function( w ) {
            w = w || window;
            if ( !w.document ) {
                throw new Error("jQuery requires a window with a document");
            }
            return factory( w );
        };
    } else {
        factory( window );
    }

// Pass this, window may not be defined yet
}(this, function( window ) {

    // All of jQuery gets defined here, and attached to the (locally named variable) "window".

}));

请注意顶部的注释，其中明确提到了 browserify；在 jQuery 在 CommonJs 领域的情况下，它不会返回我们所知道的 jQuery，而是返回一个函数，当传递一个对象(应该是 window)时，返回 jQuery。

---

为了进一步混淆这个问题，这个设置代码在最近的提交中又发生了变化，所以 module.exports 是 determined like so ;

module.exports = global.document ?
    factory( global ) :
    function( w ) {
        if ( !w.document ) {
            throw new Error( "jQuery requires a window with a document" );
        }

        return factory( w );

... 这样如果 this 是 window 对象，当 jQuery 是 require() 时，它将返回一个 jQuery 实例，如果不是，它将像以前一样返回工厂函数；所以当 2.1.0 actually 发布时，您必须再次删除 (window) 调用。