Bundling Tool Overview
let's start by taking a look at this table:
|Supports ES6 Modules||no||no||no||yes|
|Runs with Grunt||yes||yes||yes||yes|
|Runs with Gulp||yes||yes||yes||yes|
|Project Commits/m *||0||0||54||113|
Data: Github and Webpack docs; 20.07.2016
(*)Commits from the 01.06 to the 01.07.2016
Let's take a closer look at the tools listed above, shall we?
- Easy/quick to use
- No build process needed
- Large file size
- Only supports AMD
With almost 10000 Stars on Github, Browserify is the second largest bundling tool on the list. Browserify works as a command-line tool that supports the CommonJS syntax. One of the advantages of Browserify is the simple setup: no config files needed, just run "browserify", or the grunt/gulp plugin. Browserify is used by many popular projects, such as react, mapbox or cloudflare.
- Easy/quick to use
- Big community
- Only supports CommonJS
- Greatly customizable
- Can replace grunt/gulp
- Huge community
- Setup takes time
Rollup is the youngest of the bundler listed but grows at a steady rate (roughly 113 commits/month!) nonetheless. Rollup specializes in ES6 modules but supports CommonJS as well. The huge advantage of Rollup/ES6 Modules is the so-called "Tree-shaking": you can specify in the import statement which parts of the file required should be included, allowing to select just one part of a library for example which allows for a much smaller and organized output file. The plugins available for Rollup allow for a build process similar to webpack, with plugins for babel or uglifyJS for example. Another cool thing about Rollup is the focus on ES6 Modules, In which I see the future of module bundling.
- ES6 Module support
- Quick project growth
- relatively small community
Similar to the conclusion from the last part, every bundler has its point, and its up to you to decide when and how to use them.
- RequireJS is good for legacy projects and people who don't want to build files every time they change something
- Browserify is for people who want to start quick and use CommonJS
- Webpack if you want one beefy tool that does everything
- Rollup is for developers who care about performance and file size, while keeping up with latest ES standards