Search code examples
javascriptrequirejsbrowserifyamdcommonjs

What to use requirejs and when to use browserify?

I read quite a few articles about requirejs and browserify. In 2 lines if one asks me to define it I will say.

AMD -> Client Side -> Implementaion : RequireJS -> asynchronous -> uese define keyword

CommonJs -> Server Side -> Implementaion : Browserify -> synchronous -> uses export keyword

What I want to understand is:-

  1. Even being Server side why will one use browserify in client side?
  2. When will you prefer one over other?
Solution

  • Webpack and Browserify don't replace requirejs directly, they replace the r.js optimizer that comes with require. Both modern bundlers run your code (and optionally stylesheets, templates, and other resources) through various filters, creating a single file with your whole application wrapped up.

    RequireJS' asynchronous modules (AMD) has been replaced by the more commonly-used CommonJS and ES6 module definitions. This is, in part, so node modules play nicely with webpack and browserify, but also because the benefits of AMD largely stop applying when you have a single bundled file. Since all modules are available at the same time, you don't need the overhead of managing asynchronous loading.

    Webpack and Browserify also expand on rjs' feature set, by adding extensive support for compiling templates, images, fonts, and other resources into your bundle. They can run transpilers (like Babel or Typescript), uglifiers, minifiers, and all sorts of other tools along the way. Webpack also supports outputting multiple bundles and loading them on-demand, while hiding most of those deployment details from the developer.