在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";