Y compris JQuery Mobile dans un projet Node JS avec Browserify

J'écris une application Node JS où j'ai besoin jQuery UI et jQuery Mobile. J'utilise Browserify pour emballer les modules dans un seul fichier js.

J'ai le code suivant pour inclure jQuery et jQuery UI dans mon projet.

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

Et il fonctionne. Des problèmes surviennent lorsque j'essaie d'ajouter jQuery mobile, soit avec un besoin:

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

Ou avec une étiquette de script

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

J'ai la même erreur:

"Uncaught TypeError: Impossible de définir la propriété 'mobile' de indefined".

Je comprends que j'ai cette erreur parce que jQuery mobile recherche l'objet jQuery dans Window et ne le trouve pas, mais comment le réparer? Il n'y a pas de module mobile jQuery sur npm.

Voici une démonstration simple à exécuter en utilisant browserify-shim et jquery + jquery mobile: https://gist.github.com/mchelen/a8c5649da6bb50816f7e

Les lignes les plus importantes sont:

package.json

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

entry.js

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

Vous devez utiliser une calque de navigateur.

Vous pouvez utiliser grunt-browserify pour exécuter vos besoins avant chargement de la page.

Ensuite, vous pouvez simplement utiliser une cale pour exporter '$' et exiger jQuery dans JQuery.mobile comme cela s'est fait ici avec un autre plugin:

Shim a jQuery plugin with browserify

Vous pouvez également utiliser https://github.com/thlorenz/browserify-shim si vous n'aimez pas l'approche gruntée

J'ai le même problème.

En ce moment, j'utilise browerify pour tous sauf jquery et jquery-mobile et j'ajoute des tags de script pour jquery et jquery-mobile à l'en-tête, et une étiquette de script du paquet au bas du corps (alors, requiert (".. / Jquery ") et nécessitent (" … / jquery-mobile ") ne sont plus nécessaires). Mauvaise solution, mais ça marche

 <!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>

Vous devez spécifier le chemin d'accès à jquery-mobile.

Dans 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" }

Dans votre fichier js:

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

Vous pouvez en voir plus ici

Je grimpe également. Dans gulpfile.js:

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