1

我想使用Browserify ，但继续从Google 的 CDN加载 jQuery 和 jQuery UI，而不是将代码连接到我的文件或供应商包中。我似乎无法弄清楚如何让它工作。

加载时出现此错误foo.js：

找不到模块'jquery-ui'

这些是相关文件：

包.json

{
  // ...
  "devDependencies": {
    "browserify-shim": "^3.8.11",
    "deamdify": "^0.1.1",
    "grunt": "^0.4.5",
    "grunt-browserify": "^4.0.1"
  },
  "dependencies": {
    "jquery": "^2.1.4",
    "jquery-ui": "^1.10.5"
  },
  "browserify-shim": {
    "jquery": "global:$",
    "jquery-ui": {
      "depends": "jquery",
      "exports": null
    }
  }
}

Gruntfile.js

'use strict';

module.exports = function (grunt) {

    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        browserify: {
            options: {
                external: [
                    'jquery',
                    'jquery-ui'
                ],
                transform: [
                    'browserify-shim',
                    'deamdify'
                ]
            },
            app: {
                files: [{
                    expand: true,
                    cwd: 'public/js',
                    src: '*.js',
                    dest: 'assets/js'
                }]
            }
        }
    });

    grunt.loadNpmTasks('grunt-browserify');
};

foo.js

'use strict';

var $ = require('jquery');
require('jquery-ui');

$(document).ready(function () {
    console.log('Hello world');

    $('button').button();
});

我也尝试过exclude，external它产生了相同的结果。有什么办法可以做到这一点？

我意识到还有debowerify变换，但如果可能的话，我想避免使用 Bower。

更新：我注意到注释掉require调用'jquery-ui'会起作用，因为 jQuery 默认公开全局$，jQuery但我认为用 CommonJS 甚至 AMD 格式编写代码的全部意义在于避免依赖全局变量？

4

1 回答 1

1

你不需要external这里的块。那是为了为您的捆绑包排除各种库......这就是为什么在使用require('jquery-ui')withexternal块时会出现该错误的原因。

您想要的是将全局公开jquery-ui给您的 browserify 构建，如docs 中的此处所示。

browserify-shim 配置为：

"browserify-shim": {
    "jquery": "global:$", // this is only if you're also loading jQuery via CDN/<script> tag
    "jquery-ui": {
      "depends": "jquery" 
    }
  }
于 2016-01-08T13:47:30.803 回答