Using Browserify with jQuery Plugins

Question

Some brief background: I'm using browserify and browserify-shim (and gulp to build) to create a web app. Prior to this issue, I was requireing jquery from npm so I had no issues. Once I started doing some optimization, I realized how massive the bundle was with jQuery included. So now I'm grabbing jQuery from a CDN with the script tag and placing it before the bundle.js file. But I'm having issues declaring jQuery as a global and properly shimming my jQuery plugins in browserify and browserify-shim. When I run gulp to build, I keep getting the same error:

[gulp] gulp-notify: [Compile Error] module "jquery" not found from "/Volumes/Chetan/Users/cshenoy/Projects/urbanstems-node/app/plugins/jquery.inview.js"

It seems like browserify-shim isn't picking up on jQuery being a global.

For reference, I'm using the inview plugin.

Here's my package.json with the relevant parts

"browser": {
  "inview": "./app/plugins/jquery.inview.js"
},
"browserify-shim": {
  "jquery": "global:jQuery",
  "inview": {
    "depends": [
      "jquery"
    ]
  }
}

Let me know what else I can include to help diagnose the error.

I'm curious about going the opposite direction. When you require('jquery') from npm, how were you able to expose it globally so plugins still worked? — Michael Martin-Smucker
– Michael Martin-Smucker, Commented Aug 13, 2014 at 21:37
I didn't expose it globally when I installed it from npm. The value for jquery inside browserify-shim would be $ or jQuery. Then all your jQuery-dependent plugins would be listed below it with the depends field listing jquery. — Chetan Shenoy
– Chetan Shenoy, Commented Aug 14, 2014 at 18:23

Chetan Shenoy · Accepted Answer · 2014-07-15 19:38:04Z

6

Turns out you don't need to declare every jQuery plugin under browserify-shim if it only depends on jQuery. I just deleted the inview entry and everything works fine.

answered Jul 15, 2014 at 19:38

Chetan Shenoy

8431 gold badge10 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using Browserify with jQuery Plugins

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related