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": "[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"
    ]
  }
}

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
– Michael Martin-Smucker, Commented Aug 13, 2014 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
– Nick Tomlin, Commented Aug 14, 2014 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
– xlttj, Commented Jan 22, 2016 at 7: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
– YPCrumble, Commented Mar 28, 2016 at 18:52
@YPCrumble the code works as is. I just want a cleaner way to do it :) — Nick Tomlin
– Nick Tomlin, Commented Mar 28, 2016 at 19:01

danhere · Accepted Answer · 2016-03-24 19:42:09Z

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, 2016 at 19:42

danhere

6801 gold badge8 silver badges21 bronze badges

answered Jun 13, 2014 at 13:03

Ian Lim

4,2943 gold badges34 silver badges44 bronze badges

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

2 Comments

Nick Tomlin Over a year ago

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.

Glitches Over a year ago

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...

YPCrumble · Accepted Answer · 2016-03-28 18:51:22Z

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.

Ted · Accepted Answer · 2015-06-01 19:59:02Z

0

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

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

answered Jun 1, 2015 at 19:59

Ted

7,32110 gold badges53 silver badges77 bronze badges

3 Comments

Nick Tomlin Over a year ago

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?

Ted Over a year ago

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.

Nick Tomlin Over a year ago

Gotcha. That makes sense. Glad to know someone else feels my pain. Please update if you find a better way :)

Collectives™ on Stack Overflow

Using browserify with npm jQuery and non-npm plugins

3 Answers 3

2 Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related