使用 Browserify 在 Node JS 项目中包含 JQuery Mobile
Posted
技术标签:
【中文标题】使用 Browserify 在 Node JS 项目中包含 JQuery Mobile【英文标题】：Including JQuery Mobile in a Node JS project with Browserify 【发布时间】：2014-02-21 03:11:12 【问题描述】：我正在编写一个需要 jQuery UI 和 jQuery Mobile 的 Node JS 应用程序。我正在使用 Browserify 将模块打包到一个 js 文件中。
我有以下代码在我的项目中包含 jQuery 和 jQuery UI。
var jQuery = require('jquery');
require('jquery-ui-browserify');
而且它有效。当我尝试添加 jQuery mobile 时出现问题，无论是使用 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: Cannot set property 'mobile' of undefined”。
我知道我收到此错误是因为 jQuery mobile 在 Window 中查找 jQuery 对象但没有找到它，但如何解决？ npm 上没有 jQuery 移动模块。
【问题讨论】：
【参考方案1】：我也遇到了同样的问题。
现在我对除 jquery 和 jquery-mobile 之外的所有内容都使用 browerify，并且我将 jquery 和 jquery-mobile 的脚本标签添加到标题中，并在正文底部添加了捆绑包的脚本标签（所以，需要（ "../jquery") 和 require("../jquery-mobile") 不再需要）。糟糕的解决方案，但它有效
<!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>
【讨论】：
【参考方案2】：您必须使用 browserify shim。
您可以使用 grunt-browserify 在页面加载之前运行您的需求。
然后您可以简单地使用 shim 导出“$”并在 JQuery.mobile 中要求 jQuery，就像这里使用另一个插件完成的一样：
Shim a jQuery plugin with browserify
如果你不喜欢咕噜咕噜的方法，你也可以使用https://github.com/thlorenz/browserify-shim
【讨论】：
【参考方案3】：这是一个使用 browserify-shim 和 jquery + jquery mobile 的简单可运行演示： 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');
【讨论】：
我试过这个，但它不适用于 jQuery mobile 1.4.5。有一个对this 的引用，它返回Object 。不知道为什么它没有引用window。
我也尝试了几个小时来完成这项工作。我不明白packadge.json“浏览器”中的那部分，它硬编码了jquery和jquery-mobile的路径。这不应该被browserify“知道”吗？为什么 require('jquery') 有效并且 require('jquery-mobile') 通过我“找不到模块'jquery-mobile'？
好吧，我终于能弄明白了。实际上，您不需要指定 jquery 的路径，但您需要为 jquery-mobile 指定路径。我为 SO 准备了一个粘贴：codepen.io/Reblutus/pen/dPwVKz（未经测试）。我也输入了答案...【参考方案4】：
您需要指定 jquery-mobile 的路径。
在 package.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');
你可以看到更多这个here
我也在使用 gulp。在 gulpfile.js 中：
gulp.task('browserify', ['jshint'], function ()
return browserify('./src/js/app.js')
.bundle()
.pipe(source('myjs.js'))
.pipe(gulp.dest('./js/'));
);
【讨论】：
以上是关于使用 Browserify 在 Node JS 项目中包含 JQuery Mobile的主要内容，如果未能解决你的问题，请参考以下文章
使用 Node.JS、Express 和 EJS 实现 browserify 的示例
Browserify 中的 require.context() 等效项
如何在单独的 browserify 供应商捆绑包中包含 node_modules
合并 JS 流时保留源映射（将 lib 依赖项与 browserify 捆绑包连接）