Is there a bundler like tool for javascript dependency management, especially if you’re not doing Rails on the backend?
I see a project like https://github.com/tthew/gulp-angular-webpack-seed and then I wonder, do I have to manually update all the library dependencies in package.json and bower.json? That implies I have to be aware of breaking changes to each library…
npm is the JS equivalent of bundler for Ruby.
Thanks @justin. In retrospect, I think I asked a “bad” question. I think I’m looking for the ideal tooling setup to spin up Javascript on the front end.
2 goals I want to accomplish:
1- Manage my javascript dependencies independent/outside of the asset pipeline (I don’t want to use the angular-rails gem for example). This is really to enable the goal of being able to swap out a backend easily while preserving the front-end architecture. So for example instead of a Rails API, I could have a Node, Elixir, or Go API.
2 - Find the least resistant path to do #1 - it doesn’t have to be “perfect”, at this point just good enough will do. Once I have a path, I feel confident I can go off and do the necessary tweaking on the tooling. I just want 1 or 2 baseline recommendations on dependency management and tooling to try.
Here is what I see so far as a potential front-end only “tool” or “build” pack:
npm package manager - Common JS Modules, Explicit Dependency Injection; ensures dependencies play nicely together; source: http://stackoverflow.com/questions/18641899/what-is-the-difference-between-bower-and-npm
gulp - Task runner that lets you automate repetitive tasks (sass compilation, running of unit tests, browser refresh) source: http://brandonclapp.com/what-is-gulp-js-and-why-use-it/
webpack - module bundler that generates static assets; split application into multiple chunks and load those chunks on demand…sources: https://web-design-weekly.com/2014/09/24/diving-webpack/ + https://www.quora.com/What-is-webpack
There is apparently some overlap between gulp + webpack, but I think npm and gulp (and adding webpack as needed) is a good start unless I am missing something.
We’re 100% sold on webpack with npm.
Yes there is some overlap between gulp and webpack. Webpack is capable of compiling your Sass styles, uglifying your JavaScript, autoprefixing your styles, and other things that you can use Gulp to do as well. However, Webpack’s core purpose is as a module loader, which Gulp cannot do by itself (it would need to call webpack or some other module loader). I have seen builds where people use both, calling webpack from within their compilation Gulp tasks.
However, at that point, you might as well go all the way and rely on just using just webpack and npm scripts and foregoing build tools completely. This is an approach discussed in this blog post and is what we currently do on our internal project.
NPM is definitely, definitely the way to manage your JS dependencies. Also, you can look into npm shrinkwrap, a built-in feature of npm that lets you lock down your dependencies’ dependencies. If your package.json is your Gemfile, your npm-shrinkwrap.json is your Gemfile.lock.