Using browserify with npm jQuery and non-npm plugins

Question

I am using browserify to bundle front-end code. It\'s been great so far, but I\'ve been having difficulty mixing npm and non npm packages. For example, using the npm version of

Answer 1

The browser directive is just an alias to specify what you want when you write jquery. The default for jquery is the path in node_modules, so your line:

"jquery": "./node_modules/jquery/dist/jquery.js",

...is redundant and you could remove it, because when you write "depends": ["jquery"] in your Browserify Shim config, jquery already points to ./node_modules/jquery/dist/jquery.js without that line in your browser key. In fact, you could probably remove the browser directive entirely, you'd have to check the config in those jQuery plugins' package.json files but most likely they're already aliased as you have them, without the browser override.

Otherwise I don't think there is a cleaner way to implement this. Like you said you need to use Browserify Shim to shim those non-CJS jQuery plugins and you're doing it the right way.

Answer 2

I would do as follows:

1. Use debowerify to include libraries available in bower, in your case will be, jquery-waypoints, jquery-validation

2. Use the jquery which comes in npm package, which is available here https://github.com/jquery/jquery

As such, I would also remove browserify-shim for the time being.

Answer 3

You're missing defining the dependencies correctly I believe (e.g. set "$" to your jquery declaration):

"plugin": {
  "exports": "plugin",
  "depends": [
    "jquery:$"
  ]
},...