发表新帖
发表新帖

Including JQuery Mobile in a Node JS project with Browserify

后端 未结
关注
4 604
面向向阳花
面向向阳花 2021-01-12 14:59

I\'m writing a Node JS application where I need both jQuery UI and jQuery Mobile. I\'m using Browserify to pack the modules in a single js file.

I have the following

相关标签:
4条回答
  • 误落风尘
    2021-01-12 15:17

    You need to specify the path to jquery-mobile.

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

    in you js file:

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

    You can see more of this here

    I am also using gulp. In gulpfile.js:

    gulp.task('browserify', ['jshint'], function () {
    return browserify('./src/js/app.js')
    .bundle()
    .pipe(source('myjs.js'))
    .pipe(gulp.dest('./js/'));
});
    0 讨论(0)
  • 野趣味
    2021-01-12 15:28

    I've got the same problem.

    right now i'm using browerify for all except jquery and jquery-mobile and i add script tags for jquery and jquery-mobile to the header, and script tag of the bundle at the bottom of the body (so, require("../jquery") and require("../jquery-mobile") are no more necessary). Bad solution, but it works

    <!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>
    0 讨论(0)
  • -上瘾入骨i
    2021-01-12 15:30

    Here is a simple runnable demo using browserify-shim and jquery + jquery mobile: https://gist.github.com/mchelen/a8c5649da6bb50816f7e

    The most important lines are:

    package.json

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

    entry.js

    var $ = require('jquery');
$.mobile = require('jquery-mobile');
    0 讨论(0)
  • 逝去的感伤
    2021-01-12 15:38

    You must use a browserify shim.

    You could use grunt-browserify to run your requires before page load.

    Then you can simply use a shim to export '$' and require jQuery in JQuery.mobile like its done here with another plugin :

    Shim a jQuery plugin with browserify

    You could also use https://github.com/thlorenz/browserify-shim if you do not like the grunt approach

    0 讨论(0)
 看不清?
提交回复
热议问题