使用 browserify-shim 伪造全局 jQuery? (找不到模块 'jquery')

Fake global jQuery with browserify-shim? (Cannot find module 'jquery')

关于 jQuery 插件,我在使用 Browserify 时遇到了一个令人费解的问题。由于我有多个单独的子应用程序包,因此我在 HTML 中有一些全局库作为 <script> 标记以防止重复。

我正在使用 gulpbrowserify-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]-->

在我的一个源文件中:

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.cookie.js 中有一个调用 require('jquery') 没有得到解决。

如何 'fake' 使用 browserify-shim 将全局 jQuery 实例存在给插件?


注意:This solution 不能满足我的需求,因为 jQuery 会被打包成很多包。

已解决。 This solution 似乎运行良好。

作为参考,这是我的(固定的)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);