let’s start by taking a look at this table:
|Supports ES6 Modules||no||no||yes||yes|
|Runs with Grunt||yes||yes||yes||yes|
|Runs with Gulp||yes||yes||yes||yes|
|Project Commits/m *||0||1||63||44|
Data: Github; 22.09.2019
(*)Commits from the 22.08 to the 22.09.2019
Let’s take a closer look at the tools listed above, shall we?
RequireJS is probably the oldest popular module bundler, created in 2011 it’s still a choice today. RequireJS chooses AMD as the primary (and only) syntax for module definition. Different from most other bundling tools, RequireJS works more like a library than a classic bundling tool: simply drop require.js and the config.js in your project and you’re ready to go.
- Easy/quick to use.
- No build process needed.
- Large file size.
- Only supports AMD.
With over 10000 Stars on Github, Browserify is the third 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.
- Easy and quick to use.
- Only supports CommonJS.
- Supports all popular bundling syntax.
- 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 nonetheless. Rollup specializes in ES6 modules but supports CommonJS as well. The 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.
- Easy to set up.
- Quick project growth.
- No AMD support.
- RequireJS is good for legacy projects and developers who don’t want to build files every time they change something.
- Browserify is for projects where you want to start quick and use CommonJS.
- Webpack if you want one beefy tool that can do everything very well, but requires more setup.
- Rollup is similar to Webpack, but with less trouble setting it up in exchange for slightly less module syntax supported.