5

jQuery プラグインに関して、Browserify で不可解な問題が発生しています。個別のサブアプリに複数のバンドルがある<script>ため、繰り返しを防ぐために HTML にタグとしていくつかのグローバル ライブラリがあります。

とを使用gulpしてバンドルを作成しています。browserify-shimbabelify

以内package.json:

"dependencies": {
  "jquery.cookie": "^1.4.1",
  ...
},
"browserify-shim": {
  "jquery": "global:jQuery",
   ...
},
"browserify": {
  "transform": [
    "browserify-shim"
  ]
}

内base.html: (本番環境では、これらは CDN リンクになります)

<!--[if lt IE 9]><script src="/bower_components/jquery-legacy/jquery.min.js"></script><![endif]-->
<!--[if gte IE 9]><!-->
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
<!--<![endif]-->

私のソースファイルの1つで：

import $ from 'jquery'; // this works
import 'jquery.cookie'; // this crashes browserify

エラーメッセージ：

Error: Cannot find module 'jquery' from '/path/to/node_modules/jquery.cookie'

jQuery をバンドルに含めたくないので、npm では jQuery はインストールされません。

require('jquery')ここでの問題は、解決されていない呼び出しがあることだと思いjquery.cookie.jsます。

browserify-shim を使用してグローバル jQuery インスタンスの存在をプラグインに「偽装」するにはどうすればよいですか?

注意: jQuery は多くのバンドルに組み込まれるため、このソリューションは私のニーズを満たしていません。

4

1 に答える 1

6

解決しました。このソリューションは完全に機能しているようです。

watchify参考までに、Gulpfile からの私の (修正された)呼び出しを次に示します。

var b = browserify({
    entries: [app.input_dir + app.entry],
    debug: true,
    cache: {},
    packageCache: {},
    fullPaths: true
})
    .transform(babelify)
    .transform({
        global: true
    }, 'browserify-shim')
    .plugin('minifyify', {
        map: app.output_dir + app.entry + '.map',
        output: app.output_dir + app.entry + '.map'
    });

var watcher = watchify(b);
于 2015-07-16T13:40:44.690 に答える