browserify/gulpビルドで未定義のjQueryエラー

Question

jquery-uiをgulp経由でbrowserifyでビルドされたプロジェクトにロードする際に問題が発生しました。私のコードでは、私は持っています：

エラーは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をロードするためのshimの作成に関連する同様の問題に対する多くのソリューションがありますが、この問題は異なるようです。 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" 
}, 

それが観測された動作を変更しませんでした。

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を使用

Answer 1

問題はバベルによる変換後、声明importがトップに上昇するということです代わりに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";