Including JQuery Mobile in a Node JS project with Browserify

问题

I'm writing a Node JS application where I need both jQuery UI and jQuery Mobile. I'm using Browserify to pack the modules in a single js file.

I have the following code to include jQuery and jQuery UI in my project.

var jQuery = require('jquery');
require('jquery-ui-browserify');

And it works. Problems arise when I try to add jQuery mobile, either with a require:

require('./lib/jquery.mobile-1.4.0.min.js');

or with a script tag

<script src="/lib/jquery.mobile-1.4.0.min.js" type="text/javascript"></script>

I get the same error:

"Uncaught TypeError: Cannot set property 'mobile' of undefined".

I understand that I get this error because jQuery mobile looks for the jQuery object in Window and does not find it, but how to fix it? There is no jQuery mobile module on npm.

回答1:

Here is a simple runnable demo using browserify-shim and jquery + jquery mobile: https://gist.github.com/mchelen/a8c5649da6bb50816f7e

The most important lines are:

package.json

 "browserify-shim": {
   "jquery": "$",
   "jquery-mobile" : { "exports": "$.mobile", "depends": [ "jquery:$" ] }
 },

entry.js

var $ = require('jquery');
$.mobile = require('jquery-mobile');

回答2:

You must use a browserify shim.

You could use grunt-browserify to run your requires before page load.

Then you can simply use a shim to export '$' and require jQuery in JQuery.mobile like its done here with another plugin :

Shim a jQuery plugin with browserify

You could also use https://github.com/thlorenz/browserify-shim if you do not like the grunt approach

回答3:

You need to specify the path to jquery-mobile.

In packadge.json

"devDependencies": {
    "gulp": "3.8.7",
    "browserify": "9.0.3",
    "browserify-shim": "3.8.3",
    // [...] many more hidden
    "jquery": "1.11.0",
    "jquery-mobile": "1.4.1"
},
"browser": {
    "jquery-mobile": "./node_modules/jquery-mobile/dist/jquery.mobile.js"
},
"browserify": {
    "transform": [ "browserify-shim" ]
},
"browserify-shim": {
    "jquery": "$",
    "jquery-mobile" : { "exports": "$.mobile", "depends": [ "jquery:$" ] },
    "three": "global:THREE"
}

in you js file:

var $ = require('jquery');
$.mobile = require('jquery-mobile');

You can see more of this here

I am also using gulp. In gulpfile.js:

gulp.task('browserify', ['jshint'], function () {
    return browserify('./src/js/app.js')
    .bundle()
    .pipe(source('myjs.js'))
    .pipe(gulp.dest('./js/'));
});

回答4:

I've got the same problem.

right now i'm using browerify for all except jquery and jquery-mobile and i add script tags for jquery and jquery-mobile to the header, and script tag of the bundle at the bottom of the body (so, require("../jquery") and require("../jquery-mobile") are no more necessary). Bad solution, but it works

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <link href="js/vendors/jquery.mobile-1.4.0.min.css" rel="stylesheet">
  <script src="js/vendors/jquery-1.10.2.min.js"></script>
  <script src="js/vendors/jquery.mobile-1.4.0.min.js"></script>
</head>

<body>
  <div class="Application">
  </div>
  <script src="js/app.built.js"></script>
</body>
</html>

来源：https://stackoverflow.com/questions/21428993/including-jquery-mobile-in-a-node-js-project-with-browserify

标签

javascript

jquery

node.js

jquery-mobile

browserify