Fake global jQuery using padding browser? (Cannot find jquery module)

Question

I am facing a cryptic issue with Browserify regarding jQuery plugins. Since I have several packages for individual sub-applications, I have some global libraries as <script> tags in my HTML to prevent repetition.

I use gulp , browserify-shim and babelify to create my packages.

Inside package.json :

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

Inside base.html : (During creation, these will be CDN links)

 <!--[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]--> 

In one of my source files:

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

Error message:

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

jQuery is not installed with npm number since I do not want it to be rolled into my packages.

I assume the problem here is that in jquery.cookie.js there is a call to require('jquery') that is not resolved.

How can I "fake" the existence of a global jQuery instance for a plugin using a pad browser?

---

NB: This solution does not meet my needs, since jQuery will be collapsed into many packages.

Answer 1

solved. This solution works just fine.

For reference, here is my (fixed) call to watchify from my 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);