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 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": "git@github.com: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"
    ]
  }
}

I'm tackling the same issue currently. Does aliasing `jquery` with `./node_modules/jquery/dist/jquery.js` create a duplicate copy of jQuery in your final bundle? Or, what isn't working with that `package.json`? — Michael Martin-Smucker, Aug 13 '14 at 21:42
@MichaelMartin-Smucker It's working fine (no duplicate `jquery`) but I don't like having to configure things manually via the shim config — I'm lazy :). Good luck! — Nick Tomlin, Aug 14 '14 at 17:08
Thanks a bunch! That question answered my question. I couldn't get jquery.mmenu to work, but your code showed me how. +1 for showing working code in a question :) — xlttj, Jan 22 '16 at 07:57
@NickTomlin I know this is an old question but does that code work as you have it? Or is the issue that your jQuery plugins don't work like that? — YPCrumble, Mar 28 '16 at 18:52
@YPCrumble the code works as is. I just want a cleaner way to do it :) — Nick Tomlin, Mar 28 '16 at 19:01
@NickTomlin the only way I can see is that your `browser` directive likely isn't necessary. Other than that it's the right code. — YPCrumble, Mar 28 '16 at 19:08

score 1 · Answer 1 · edited Mar 24 '16 at 19:42

1

I would do as follows:

Use debowerify to include libraries available in bower, in your case will be, jquery-waypoints, jquery-validation
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.

edited Mar 24 '16 at 19:42

danhere

680
1
8
21

answered Jun 13 '14 at 13:03

Ian Lim

4,164
3
29
43

Thanks for your answer. I'm trying to go the npm only route at the moment, so i'd like to avoid using bower. I've updated my question to clarify. – Nick Tomlin Jun 13 '14 at 13:10
I tried the way suggested and no luck with jquery-mobile. Debowerify brought in the package from bower but deamdify didn't know how to build it out of a amd module . It got unexpected token errors. Hmmm... – Glitches Mar 11 '15 at 06:47

score 1 · Answer 2 · answered Mar 28 '16 at 18:51

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.

score 0 · Answer 3 · answered Jun 01 '15 at 19:59

0

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

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

answered Jun 01 '15 at 19:59

Ted

7,122
9
50
76

Thanks for your answer, but i'm not quite sure what you mean? Could you elaborate and give a little more context to your snippet? – Nick Tomlin Jun 01 '15 at 22:39
Erk. Stumbled across your question while looking for another solution so read too quickly. Just re-read your question and noticed that you actually have it working, but don't like the manual fiddling via browserify-shim (I had assumed that it wasn't working, potentially because you hadn't specified fully what to assign to $/jQuery in your plugin. Seeing as how you have it working, you're in the same boat as me: "argh, another jQuery plugin that I've got to make browserify-friendly." Unfortunately, there's no other way that I've found short of using a different package manager. – Ted Jun 01 '15 at 22:47
Gotcha. That makes sense. Glad to know someone else feels my pain. Please update if you find a better way :) – Nick Tomlin Jun 01 '15 at 22:50

Using browserify with npm jQuery and non-npm plugins

3 Answers3

Linked