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

Question

我在通过gulp以browserify构建的项目中加载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进口定义$，它并没有设置全局变量jQuery。

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

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

仅供参考，我一饮而尽任务是：

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

的问题是，巴贝尔，改造后的声明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";