Initializing jquery from Node

Question

I am creating a new project using the following:

$mkdir X
$cd X
$npm install jquery

Then create a new app.js file:

var http = require('http');
var $ = require('jquery');
console.log("http="+ http);
console.log("$="+ $);
console.log("$.getJSON="+ $.getJSON);

Output is:

http=[object Object]
$=function ( w ) {...}
$.getJSON=undefined

Why is $.getJSON undefined ? Using latest io.js v2.4.0.

Answer 1

You are trying to create an XHR from within Node.js. This is not going to work since Node.js is simply a JavaScript runtime and is not the same as a browser.

If you want to fetch something from somewhere over HTTP protocol, you can use something like request. For example (from official docs):

var request = require('request');
request('http://www.google.com', function (error, response, body) {
  if (!error && response.statusCode == 200) {
    console.log(body) // Show the HTML for the Google homepage. 
  }
})

You can take a look at this answer (also from me) for more information on using jQuery in combination with Node.js.

UPDATE[d again!]:

So you wanted to know how jQuery node module differentiates between browser and node environment? When you require jQuery inside a CommonJS or similar environment which provide module and module.exports, what you get is a factory and not the actual jQuery object. As you can see below, that factory can be used to create a jQuery object, i.e. using jsdom:

let jsdom = require("jsdom");
let $ = null;

jsdom.env(
  "http://quaintous.com/2015/07/31/jquery-node-mystery/",
  function (err, window) {
    $ = require('jQuery')(window);
  }
);

Here is the how jQuery differentiates between browser and io.js (or Node.js):

(function( global, factory ) {

    if ( typeof module === "object" && typeof module.exports === "object" ) {
        // For CommonJS and CommonJS-like environments where a proper `window`
        // is present, execute the factory and get jQuery.
        // For environments that do not have a `window` with a `document`
        // (such as Node.js), expose a factory as module.exports.
        // This accentuates the need for the creation of a real `window`.
        // e.g. var jQuery = require("jquery")(window);
        // See ticket #14549 for more info.
        module.exports = global.document ?
            factory( global, true ) :
            function( w ) {
                if ( !w.document ) {
                    throw new Error( "jQuery requires a window with a document" );
                }
                return factory( w );
            };
    } else {
        factory( global );
    }

// Pass this if window is not defined yet
}(typeof window !== "undefined" ? window : this, function( window, noGlobal ) {
  // implementation

  return jQuery;
}));

I would use jQuery's npm package is meant for custom builds rather than to be used with require!

UPDATE:

I had the feeling that this subject happens to keep some devs busy, so I combined the couple of my own answers and wrote an article about the whole jQuery/Node combination!

Answer 2

If you want to load jquery synchronously you can use something like the following

var jsdom  = require('jsdom');
var jQuery = require('jquery')(jsdom.jsdom('<p><a>jsdom!</a></p>').defaultView);