3

すべてのベンダー ライブラリ (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のサイズを考慮すると、これは重大な問題です。

誰かがそれを解決するのを手伝ってくれますか?

4

0 に答える 0