在包含Browserify的Node JS项目中包含JQuery Mobile

我正在写一个Node JS应用程序,我需要jQuery UI和jQuery Mobile。 我正在使用Browserify将模块打包到单个js文件中。

我有以下代码在我的项目中包含jQuery和jQuery UI。

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

它工作。 当我尝试添加jQuery移动时出现问题,要么使用require:

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

或者使用脚本标签

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

我犯了同样的错误:

“Uncaught TypeError:无法设置属性”移动“的未定义”。

我明白,我得到这个错误,因为jQuery手机在窗口中寻找jQuery对象,并没有find它,但如何解决它? npm上没有jQuery移动模块。

       

网上收集的解决方案 "在包含Browserify的Node JS项目中包含JQuery Mobile"

这里是一个简单的runnable演示使用browserify-shim和jQuery的+ jQuery的手机: https : //gist.github.com/mchelen/a8c5649da6bb50816f7e

最重要的线是:

package.json

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

entry.js

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

你必须使用一个浏览器垫片。

您可以使用grunt-browserify在页面加载之前运行您的需求。

然后你可以简单地使用一个shim来导出'$',并要求jQuery.mobile中的jQuery就像在这里用另一个插件完成的那样:

使用browserify填充一个jQuery插件

如果你不喜欢咕噜的方法,你也可以使用https://github.com/thlorenz/browserify-shim

我有同样的问题。

现在我使用的是除了jQuery和jQuery的手机之外的所有人,我添加脚本标签的jQuery和jQuery的手机的标题,和脚本标签的束在身体的底部(所以,要求(“.. / jquery“)和require(”../ jquery-mobile“)不再需要)。 不好的解决scheme,但它的作品

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

您需要指定jquery-mobile的path。

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

在你的js文件中:

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

你可以在这里看到更多

我也在使用gulp。 在gulpfile.js中:

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