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 thing today. RequireJS chooses AMD as the primary (and only) syntax for module definitions. 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 almost ready to go.
- Easy/quick to use.
- No build process needed.
- Large file size.
- Only supports AMD.
- Largely inactive
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 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, which seem like the future of module bundling.
- ES6 module support.
- Quick project growth.
- No AMD support.
- Smaller community than e.g. Webpack
- 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 only 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.