javascript - 从 CDN 浏览器化 jQuery UI

Question

我想使用Browserify但继续从 Google's CDN 加载 jQuery 和 jQuery UI而不是将代码连接到我的文件或 vendor 包中。我似乎不知道如何让它发挥作用。

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

Cannot find module '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。

更新:我注意到注释掉了 require调用'jquery-ui'会起作用，因为 jQuery 公开了全局 $和jQuery默认情况下，但我认为以 CommonJS 甚至 AMD 格式编写代码的全部目的是避免依赖全局变量？

Answer 1

此处不需要 external block 。这是为了排除您的 bundle 中的各种库...这就是为什么当将 require('jquery-ui') 与 external block 一起使用时，您会收到该错误。

您想要的是将全局 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" 
    }
  }