Difference between bower, browserify, requirejs, webpack?

javascript requirejs gulp bower browserify
user779159 picture user779159 · Jun 10, 2015 · Viewed 9.1k times · Source

I'm used to simple and small JS projects where the JS dependencies are concatenated and minified as part of the build process using something like gulp and the script tag in the html contains the hardcoded path to that minified JS file. It's not elegant and probably has several disadvantages, but conceptually it's a simple approach.

But with bigger projects, I understand it's good to look at packaging systems like bower, browserify, requirejs, webpack, etc. What's the benefit to using them as opposed to the way I'm used to doing it? What are the main ways it helps the development process?

Are these technologies I mentioned competitors to each other, or are some of them fulfilling different purposes and can be used together? What is the difference between them?

Also I looked into webpack and it's described in some places as though it's a replacement for gulp. I thought gulp is a build system and different from these packaging tools?

EDIT: How do these concepts relate to AMD or CommonJS?

Answer

saj picture saj · Jun 10, 2015

Browserify, RequireJS, WebPack are all module loaders. Both AMD and CommonJs are types of modules. Many (most) javascript libraries such as JQuery can be loaded as modules. Require has been around for a while and its IP is under the DOJO foundation. Browerify is gaining in popularity mainly due to server side JS (node) also works client side.

Client side javascript module loaders on slant.co.

Bower is a package manager mainly used to install Git repos and it can also link into GULP or Grunt which are front end build tools i.e. they use the requireJS optimizer to minify, etc.

You can compare the three module loaders, Bower is not comparable as once its copied packages down for you that's pretty much it.

Related questions

Mismatched anonymous define() module

I'm getting this error when I browse my webapp for the first time (usually in a browser with disabled cache). Error: Mismatched anonymous define() module: function (require) { HTML: <html> . . . <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/…

Read More
Relation between CommonJS, AMD and RequireJS?

I'm still very confused about CommonJS, AMD and RequireJS, even after reading a lot. I know that CommonJS (formerly ServerJS) is a group for defining some JavaScript specifications (i.e. modules) when the language is used outside the browser. CommonJS …

Read More
Does it make sense to use Require.js with Angular.js?

I'm a newbie to Angular.js and trying to understand how it's different from Backbone.js... We used to manage our packages dependencies with Require.js while using Backbone. Does it make sense to do the same with Angular.js?

Read More