CODEWITHSUNDEEP
jquerynode.jsbrowserifybrowserify-shim
Nick Tomlin
Nick Tomlin

Reputation: 29231

Using browserify with npm jQuery and non-npm plugins

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 jQuery with non CJS versions of jQuery plugins.

My current solution is to use the browser key in package.json to point to jQuery's dist, and then use browserify-shim to add it as a dependency of the plugins.

Is there a cleaner way to do this than what I currently have?

Edit: I'm currently trying to use npm and package.json to manage all my dependencies, so I don't want to use bower on this project. Call me crazy : )

Package.json

{
  "dependencies": {
    "jquery": "~2.1.0",
    "browserify": "latest",
    "browserify-shim": "^3.5.0",
    "jquery-waypoints": "[email protected]:imakewebthings/jquery-waypoints.git",
    "jquery-validation": "git://github.com/jzaefferer/jquery-validation"
  },
  "browser": {
    "jquery": "./node_modules/jquery/dist/jquery.js",
    "jquery-waypoints": "./node_modules/jquery-waypoints/waypoints.js",
    "jquery-validate": "./node_modules/jquery-validation/build/release.js"
  },
  "browserify-shim": {
    "jquery": "$",
    "jquery-waypoints": {
      "depends": [
        "jquery"
      ]
    },
    "jquery-validate": {
      "depends": [
        "jquery"
      ]
    }
  },
  "browserify": {
    "transform": [
      "browserify-shim"
    ]
  }
}

Upvotes: 16

Views: 4365

Answers (3)

YPCrumble
YPCrumble

Reputation: 28692

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.

Upvotes: 1

Ian Lim
Ian Lim

Reputation: 4284

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.

Upvotes: 1

Ted
Ted

Reputation: 7261

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

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

Upvotes: 0

Related Questions