4

I'm working on a large front end application with a medium sized team. Until now, we've been using requirejs and AMD modules to manage our ~500 file project. We've recently made the decision to migrate to commonjs and use NPM as our package manager for various reasons. Here is my question:

How do I incorporate a random, lone framework file (aka a jquery plugin) into our package.json?

For example, we use this random jquery color picker https://github.com/laktek/really-simple-color-picker/blob/master/jquery.colorPicker.min.js

However the repo on github does not have a package.json so using NPM's built in git awesomeness doesn't work. So what should I be doing instead? I've been trying to use it's 'file:../../' syntax but I think it wants me to point to a node module folder and I"m not sure how best to set that up.

Bonus Question

How do I deal with "shims", e.g. I want my views to reference "knockout" but in reality be referencing a file that itself includes knockout and adds all of our plugins and custom goodness and then re-exports knockout

Any and all help is appreciated!

matty-d
  • 2,623
  • 3
  • 18
  • 21
  • You could create and manage a personal NPM package to keep or make available whatever you want in it. [You could even manage private repos](http://stackoverflow.com/questions/7575627/can-you-host-a-private-repository-for-your-organization-to-use-with-npm) – laggingreflex Feb 05 '15 at 23:35

1 Answers1

2

How do I incorporate a random, lone framework file (aka a jquery plugin) into our package.json?

First, file an issue and ask the maintainer to support some package manager. npm would be nice but even bower will do. The old days of grab random file are long gone for good reason.

Second, if the author won't comply, consider forking their code and publishing it to either npm or bower for them/for you. Considering the thousands of packages available in at least one of npm and bower, I would consider this a major red flag against using this software in my project.

Third option though is just download their file and put it in your git repository and reference it via the browser field in package.json along these lines:

"browser": {"colorPicker": "./thirdParty/jquery.colorpicker.js"}

How do I deal with "shims", e.g. I want my views to reference "knockout" but in reality be referencing a file that itself includes knockout and adds all of our plugins and custom goodness and then re-exports knockout

This is exactly what browserify-shim does when used as a browserify transform.

There's a bit of a learning curve and/or frustration dealing with all the ecosystems and hacks, but ultimately I've been able to get almost everything to work with the right browserify and browserify-shim configuration, including jquery, jquery plugins, angularjs, and pretty much any package from bower.

If you get stuck, post a separate question with the exact details of how you are stuck.

Peter Lyons
  • 142,938
  • 30
  • 279
  • 274