来自 CDN 的 Browserify jQuery UI答案

【问题标题】：Browserify jQuery UI from CDN来自 CDN 的 Browserify jQuery UI
【发布时间】：2015-11-17 04:26:01
【问题描述】：

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

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

找不到模块'jquery-ui'

这些是相关文件：

package.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。

更新：我注意到注释掉对'jquery-ui' 的require 调用将起作用，因为jQuery 默认公开了全局$ 和jQuery，但我认为整点用 CommonJS 甚至 AMD 格式写代码是为了避免依赖全局变量？

【问题讨论】：

标签： javascript jquery-ui browserify browserify-shim grunt-browserify

【解决方案1】：

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

您想要将全局 jquery-ui 公开给您的 browserify 构建，如 here in the docs。

browserify-shim 配置为：

"browserify-shim": {
    "jquery": "global:$", // this is only if you're also loading jQuery via CDN/<script> tag
    "jquery-ui": {
      "depends": "jquery" 
    }
  }

【讨论】：