Browserify jQuery UI from CDN

Browserify jQuery UI from CDN

本文关键字：CDN from UI jQuery Browserify      更新时间：2023-09-26

我想使用Browserify，但继续从谷歌的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，它产生了相同的结果。有什么办法做到这一点吗？

我意识到还有去激励变换，但如果可能的话，我想避免Bower。

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

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

您想要的是向您的浏览构建公开全局jquery-ui，如文档中所示。

浏览的填充程序配置为：

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