在包含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移动模块。
这里是一个简单的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/')); });