javascript - browserify/gulp 构建中未定义的 jQuery 错误

Question

我在通过 gulp 使用 browserify 构建的项目中加载 jquery-ui 时遇到问题。在我的代码中，我有:

import $ from "jquery";
import "jquery-ui";

错误是Uncaught ReferenceError:jQuery 未定义。查看错误发生时的 jquery-ui 代码，我发现:

( function( factory ) {
  if ( typeof define === "function" && define.amd ) {
    // AMD. Register as an anonymous module.
    define( [ "jquery", "./version" ], factory );
  } else {
  // Browser globals
    factory( jQuery );   // <<--- error raised here
  }
}( function( $ ) {
...

核心问题在于，jquery的导入虽然定义了$，但并没有设置全局jQuery变量。

我见过很多类似问题的解决方案，涉及创建用于加载 jQuery 的垫片，但这个问题似乎有所不同。这并不是说 jQuery 没有被加载(否则 $ 也将是未定义的)，而是 jquery-ui 期望 jQuery 作为全局别名。

我还看到了很多手动设置 window.jQuery = $ 或类似内容的建议。这在我的情况下也不起作用，因为正在运行的代码包是由 browserify 创建的，所以我无法控制创建模块的顺序，所以我不清楚我的代码中的位置我会发表这样的声明。

仅供引用，我的 gulp 任务是:

browserify(
  "./app/es/app.es",
  {
    debug: true,
  }
)
.transform(babel)
.on("error", function(err) { gutil.log(err); this.emit("end"); })
.pipe(source("build.js"))
.pipe(buffer())
.pipe(sourcemaps.init({ loadMaps: true }))
.pipe(sourcemaps.write("./"))
.pipe(gulp.dest("./build/js"));

我尝试使用以下配置插入 browserify-shim 转换:

"browserify-shim": {
  "jquery": "jQuery"
},

但它并没有改变观察到的行为。

Answer 1

问题在于，经过babel转换后，语句import上升到了顶部:

import $ from 'jquery';
window.jQuery = window.$ = require('jquery');
import 'jquery-ui';

=>

'use strict';

var _jquery = require('jquery');

var _jquery2 = _interopRequireDefault(_jquery);

require('jquery-ui');

function _interopRequireDefault(obj) { 
    return obj && obj.__esModule ? obj : { default: obj }; 
}

window.jQuery = window.$ = require('jquery');

可能的解决方案:

1) 使用require代替import:

window.jQuery = window.$ = require('jquery');
require('jquery-ui');

2) 使用 jquery 上的附加包装器:

_jquery.js:

import $ from 'jquery';
window.jQuery = window.$ = $;

export default $;

app.es:

import "./_jquery.js";
import "jquery-ui";