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

azz*_*azz 5 jquery jquery-cookie browserify browserify-shim

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

我正在使用gulp,browserify-shimbabelify创建我的捆绑.

package.json:

"dependencies": {
  "jquery.cookie": "^1.4.1",
  ...
},
"browserify-shim": {
  "jquery": "global:jQuery",
   ...
},
"browserify": {
  "transform": [
    "browserify-shim"
  ]
}
Run Code Online (Sandbox Code Playgroud)

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]-->
Run Code Online (Sandbox Code Playgroud)

在我的一个源文件中:

import $ from 'jquery'; // this works
import 'jquery.cookie'; // this crashes browserify
Run Code Online (Sandbox Code Playgroud)

错误信息:

Error: Cannot find module 'jquery' from '/path/to/node_modules/jquery.cookie'
Run Code Online (Sandbox Code Playgroud)

jQuery 没有和npm一起安装,因为我不希望它进入我的捆绑包.

我猜这里的问题是require('jquery')内部有一个调用jquery.cookie.js没有得到解决.

如何使用browserify-shim"伪装"全局jQuery实例的存在?


注意:这个解决方案不能满足我的需求,因为jQuery将被集成到许多捆绑包中.

azz*_*azz 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);
Run Code Online (Sandbox Code Playgroud)