Browserify avec jQuery & gt; = 2 produit "jQuery nécessite une fenêtre avec un document"

Je suis l'aide de browserify de bundle de mon front-end javascript à l'aide de CommonJS de style dépendances. Par exemple, j'ai:

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

Toutefois, lorsque browserify faisceaux les dépendances-je exécuter dans la console d'erreur:

Error: jQuery requires a window with a document

En regardant le code jQuery, je vois qu'il essaie d'utiliser this pour le mondial window.

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

Depuis browserify encapsule toutes les dépendances, this est un objectpas la window.

Ce qui est intéressant, jQuery >= 2 doit être CommonJS compatible. Cependant, le problème est de savoir comment browserify encapsule les dépendances. Quelqu'un a résolu ce problème?

source d'informationauteur Brian Cray

  1. 20

    TL;DR;

    Dans votre cas, il devrait être aussi simple que d'utiliser;

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

    Il peut paraître évident, mais vous aurez à utiliser ce formulaire de déclaration (pass window à la suite de require) dans chaque module que vous utilisez, pas juste un/de la première, etc.

    Non-TL;DR;

    Pour tous ceux qui veulent savoir pourquoil'intéressante code en jQuery qui gère ce est;

    (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".

}));

    Noter les commentaires en haut qui traitent explicitement de browserify; dans les situations où jQuery dans CommonJs-terre, au lieu de retourner jQuery comme nous le savons, il renvoie une fonction qui, lorsqu'il est passé d'un objet (ce qui devrait être window), renvoie jQuery.

    À confondre la question, ce code d'installation a changé à nouveau dans le dernier commit, de sorte que module.exports est déterminé comme;

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

        return factory( w );

    ... de telle sorte que si this est la window de l'objet lors de jQuery est require()'d, il sera de retour jQuery exemple, ou si non il va retourner à l'usine de fonctionner comme avant, de sorte lorsque 2.1.0 fait est libéré, vous devrez supprimer le (window) appeler à nouveau.

  2. 6
    var $ = require('./node_modules/jquery');

    //remplacer les sources

    var jsdom = require("./node_modules/jsdom");
var window = jsdom.jsdom().createWindow();
var $ = require('./node_modules/jquery/dist/jquery')(window);
  3. 5

    Si vous utilisez la version la plus récente(6.x) de jsdom et la dernière version de jquery(2.1.4), vous pouvez faire cela comme:

    var $ = require('jquery')(jsdom.jsdom().defaultView);
  4. 4

    La solution ci-dessus avec CreateWindow() ne fonctionne pas pour moi.

    Cependant, la suite m'a permis d'obtenir la dernière version de JQuery de travail dans le nœud:

    var $ = require('jquery')(require("jsdom").jsdom().parentWindow);
  5. 1

    J'ai aussi été en mesure de l'inclure comme Johnny Zhao fait mais nécessaire afin d'inclure jsdom premier.

    J'ai installé jquery et jsdom versjon:
    [email protected] node_modules\jquery
    [email protected] node_modules\jsdom

    Puis a couru:

    var jsdom = require("jsdom");
var $ = require('jquery')(jsdom.jsdom().defaultView);

$("<h1>test passes</h1>").appendTo("body");
console.log($("body").html());