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

Question

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

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

错误是Uncaught ReferenceError: jQuery is not defined。查看发生错误时的 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的import定义了$，但没有设置全局jQuery变量

我见过很多类似问题的解决方案，涉及创建用于加载的 shim 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";

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

Undefined jQuery error in browserify/gulp build

javascript

browserify

ecmascript-6

gulp