すべてのベンダー ライブラリ (jQuery、moment.js、bootstrap.js など) コードをvendors.jsファイルに配置し、そこから jQuery をエクスポートして他のモジュールで再利用したいと考えています。
ブートストラップは jQuery に依存しているため、両方のモジュールをシムして依存関係を構成します。
パッケージ.json
"browser": {
"bootstrap": "./node_modules/bootstrap/dist/js/bootstrap.js",
"jquery": "./node_modules/jquery/dist/jquery.js"
},
"browserify": {
"transform": [
"browserify-shim"
]
},
"browserify-shim": "gulp/utilities/shim-config.js"
シム-config.js
'use strict';
module.exports = {
'jquery' : 'jQuery',
'bootstrap' : { 'depends': { 'jquery': 'jQuery'} }
};
jQueryを外部依存関係として再利用するには、 vendors.jsrequire
をビルドするときにメソッド呼び出しで指定しました
build
.require('jQuery')
.bundle()
.pipe(source('vendors.js'))
.pipe(gulp.dest('build/public/js'))
.pipe(plumber({
errorHandler: helpers.logError
}));
vendors.jsをビルドした後、jQueryコードがvendors.jsに2 回含まれていることがわかりました。1 回目は依存関係を解決するため、もう 1 回はライブラリをエクスポートするためです。jQueryのサイズを考慮すると、これは重大な問題です。
誰かがそれを解決するのを手伝ってくれますか?