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

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

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

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

它的工作原理。出现问题时，我尝试添加jQuery Mobile的，无论是与一个要求：

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手机在Window中查找jQuery对象并且找不到它，但是如何解决它？ npm上没有jQuery移动模块。

来源

2014-01-29 Gian Luca Scoccia

下面是使用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');

来源

2014-11-24 23:17:35

我试过这个，但它不适用于我与jQuery手机1.4.5。有一个'this'的引用返回'Object {}'。不知道为什么它没有引用'window'。 – Glitches

我尝试了几个小时来完成这项工作。我不明白在packadge.json“浏览器”中的那一部分，它硬编码jQuery和jquery-mobile的路径。这不是应该由browserify“知道”吗？为什么require（'jquery'）的工作原理和要求（'jquery-mobile'）通过我找到“找不到模块'jquery-mobile'？ –

好吧我终于明白了这一点，确实你不需要指定一个jquery的路径，但你需要为jquery-mobile指定一个路径，我为SO编写了一个粘贴：http://codepen.io/Reblutus/pen/dPwVKz（未测试），我也输入了一个答案...... –

我有同样的问题。

现在我使用的是除了jquery和jquery-mobile之外的所有人，我为jquery和jquery-mobile添加了脚本标签，并且在本体底部绑定了脚本标签（因此，require （“../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>

来源

2014-02-18 07:30:33

您必须使用browserify垫片。

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

然后，你可以简单地使用垫片来导出“$”，需要在jQuery的像JQuery.mobile其在这里完成与其他插件：

Shim a jQuery plugin with browserify

你也可以使用https://github.com/thlorenz/browserify-shim如果你不喜欢繁重的做法

来源

2014-03-19 13:32:46 Rayjax

你需要指定路径的jQuery移动。

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

在你的js文件：

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

你可以看到更多的我也是用这个一饮而尽here

。在gulpfile.js：

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

来源

2015-03-20 12:41:23

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

回答

相关问题