jquery - window.jQuery に応じて、Browserify-shim を使用して jquery プラグインを要求する

Question

Browserify-shim に頭を悩ませて、自分のやりたいことを実現するのに本当に苦労しています。ドキュメントはかなり単純明快に見えますが、何かが欠けているに違いありません。

私はjqueryをvar $ = require('jquery')（それ自体でうまく動作します）使用できるようにしようとしていますが、グローバルwindow.$またはwindow.jQuery変数を参照するランダムプラグインも使用できるようにしています。

たとえば、私が使用しようとしているプラ​​グインは次のとおりです: https://github.com/jackmoore/zoom

オブジェクトを追加のメソッドで拡張し$、次のように window.jQuery を注入して IIFE にラップします。

(function($) {
// stuff
}(window.jQuery));

私は gulp を使用して、npm のbrowserify(非推奨の ( gulp-browserify) ではなく) を使用して、簡単な方法でスクリプトをバンドルしています。

gulp.task('scripts', function(){
  return browserify('src/scripts/app.js')
    .bundle()
    .pipe(source('app.js'))
    .pipe(gulp.dest('dist/scripts'));
});

package.jsonそして、これが私のファイルのbrowserify部分です:

"browserify": {
    "transform": [
      "browserify-shim"
    ]
  },
  "browserify-shim": {
    "jquery": "$",
    "jquery-zoom": {
      "depends": ["jquery:jQuery"]
    }
  }

jqueryとjquery-zoom.js ファイルの両方が必要です:

var $ = require('jquery');
var zoom = require('jquery-zoom');

そして、browserify shim 診断ツールの出力は、私にはかなり良さそうです。

$ BROWSERIFYSHIM_DIAGNOSTICS=1 browserify -d . -o dist/scripts/app.js

{ file: '/Users/clementoriol/web/browserify-test/src/scripts/app.js',
  info:
   { package_json: '/Users/clementoriol/web/browserify-test/package.json',
     packageDir: '/Users/clementoriol/web/browserify-test',
     shim: undefined,
     exposeGlobals: {},
     browser: undefined,
     'browserify-shim':
      { jquery: '$',
        'jquery-zoom': { depends: [ 'jquery:jQuery' ] } },
     dependencies:
      { jquery: '^2.1.4',
        'jquery-zoom': '^1.7.14' } },
  messages:
   [ 'Resolved "jquery" found in package.json to "/Users/clementoriol/web/browserify-test/jquery"',
     'Resolved "jquery-zoom" found in package.json to "/Users/clementoriol/web/browserify-test/jquery-zoom"',
     'Found depends "jquery" as an installed dependency of the package',
     { resolved:
        { '/Users/clementoriol/web/browserify-test/jquery': { exports: '$', depends: undefined },
          '/Users/clementoriol/web/browserify-test/jquery-zoom':
           { exports: null,
             depends: { jquery: 'jQuery' } } } } ] }

しかし、私のスクリプトがブラウザーで実行されると、window.jQuery はまだ明らかに未定義です。何が問題なのですか？

私の問題を再現する、迅速でシンプルなリポジトリを作成しました： https://github.com/clementoriol/browserify-shim-test

ありがとう ！