Browserify with jQuery> = 2产生“jQuery需要一个带文档的窗口” [英] Browserify with jQuery >= 2 produces "jQuery requires a window with a document"

问题描述

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

I'm using browserify to bundle my front-end javascript using CommonJS-style dependencies. For example, I have:

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

然而，当browserify捆绑依赖关系时，我遇到以下控制台错误：

However, when browserify bundles the dependencies I run into the following console error:

Error: jQuery requires a window with a document

查看jQuery代码，我发现它正在尝试使用此作为全局窗口。

Looking at the jQuery code, I see it's trying to use this for the global window.

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

由于browserify包装了所有依赖项，此是一个对象，而不是窗口。

Since browserify wraps all dependencies, this is an object, not the window.

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

What's interesting is jQuery >= 2 should be CommonJS compatible. However, the problem is how browserify wraps the dependencies. Has anyone solved this problem?

推荐答案

TL; DR;

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

TL;DR;

In your case, it should be as simple as using;

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

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

It might be obvious; but you'll have to use this form of declaration (pass window to the result of require) in every module you use, not just one/ the first, etc.

对于想要知道为什么的人来说，jQuery中处理这个问题的有趣代码是;

For anyone wanting to know why, the interesting code in jQuery which handles this is;

(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-land中的情况下，而不是返回 jQuery ，正如我们所知，它返回一个函数，当传递一个对象时（应该是<$ c $） c> window ），返回jQuery。

Note the comments at the top which explicitly address browserify; in situations where jQuery is in CommonJs-land, instead of returning jQuery as we know it, it returns a function which, when passed an object (which should be window), returns jQuery.

为了进一步混淆此事，此设置代码在最近的提交中再次更改，因此 module.exports 是确定如此;

To confuse the matter further, this setup code has changed again in the latest commit, so that module.exports is 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 );

...如果此 <当jQuery require（）'时，em> 窗口对象，它将返回一个jQuery例如，如果不是，它将像以前一样返回工厂功能;所以当2.1.0 实际被释放时，你将不得不再次删除（窗口）。

... such that if this is the window object when jQuery is require()'d, it will return a jQuery instance, or if not it'll return the factory function as before; so when 2.1.0 actually gets released, you'll have to remove the (window) call again.

这篇关于Browserify with jQuery&gt; = 2产生“jQuery需要一个带文档的窗口”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！