DevelopmentFrontend DevelopmentJavascript

What are the best frontend JavaScript module bundlers?

14

Options
Considered

184

User
Recs.

Sep 14, 2018

Last
Updated

Here’s the Deal

14 Options Considered

Best frontend JavaScript module bundlers	Price	Number of Plugins	Processing method
87 Webpack	-	–	–
-- Parcel	free	–	–
-- FuseBox	-	–	–
-- Browserify	-	–	–
-- rollup	-	–	–

Webpack

Add Video or Image

Top Pro

Rich and flexible plugin infrastructure

Plugins and loaders are easy to write and allow you to control each step of the build, from loading and compiling CoffeeScript, LESS and JADE files to smart post processing and asset manifest building. See More

Top Con

Config file may be hard to understand

Due to a somewhat hard to grasp syntax, configuring Webpack may take some time. See More

Top Pro

Tap into npm's huge module ecosystem

Using Webpack opens you up to npm, that has over 80k modules of which a great amount work both client-side and server-side. And the list is growing rapidly. See More

Top Con

Can not load files discovered during runtime

Top Pro

Can create a single bundle or multiple chunks loaded on demand, to reduce initial loading time

Webpack allows you to split your codebase into multiple chunks. Chunks are loaded on demand. This reduces the initial loading time. See More

Top Pro

ES6 module support

Webpack supports ES6 modules and their import and export methods without having to compile them to CommonJS require See More

Top Pro

Supports source maps for easier debugging

Source maps allow for easier debugging, because they allow you to find the problems within the origin files instead of the output file. See More

Top Pro

Share the same modules client-side and server-side

Because Webpack allows you to use the same require() function as node.js, you can easily share modules between the client-side and server-side. See More

Top Pro

Bundles CommonJs and AMD modules (even combined)

Webpack supports AMD and CommonJS module styles. It performs clever static analysis on the AST of your code. It even has an evaluation engine to evaluate simple expressions. This allows you to support most existing libraries. See More

Top Pro

Mix ES6 AMD and CommonJS

Webpack supports using all three module types, even in the same file. See More

Top Pro

Limit plugin integration issues

FuseBox

Add Video or Image

Top Pro

Without complex config

Javier Pérez Ruiz's Experience

Webpack is like grunt, huge config file Fusebox is like gulp, code what ever you want See More

Top Pro

Super easy to use

Top Pro

Built-in tasks system

Top Pro

Server, npm or browser target

Top Pro

Dynamics imports

Top Pro

Super fast

Top Pro

Hot module reload

Top Pro

Es6 export

Top Pro

Pluggable

Top Pro

Treeshake

Browserify

Add Video or Image

Top Pro

Provides browser-friendly shims of Node modules

Browserify provides browser-friendly shims of Node modules, that allow for things like Node event systems, path parsing, URL parsing. See More

Top Con

Requires NodeJS environment

Browserify does nothing client-side. It's only a server-side builder. If you want to load files from other domains, look at RequireJS. If you want to break your code up into multiple modules, look at RequireJS or Webpack. See More

Top Pro

Simple to use dependency management

To require a file, just use the require() function. var foo = require('./foo.js'); These files may have dependencies of their own. Browserify will build a dependency graph and bundle it into a single file that you just have to put in a script tag. <html> <body> <script src="bundle.js"></script> </body> </html> See More

Top Con

Not all javascript libraries have an npm version

While it's not too hard to create npm package for an existing library, it means maintaining it when the library updates. While most libraries are now on npm, many client side specific libraries are not. It's possible to require local files instead, at the expense of not having npm managed version control. See More

Top Pro

Each module is wrapped in a closure

Top Con

No dynamic loading

With Browserify it is impossible to do something like this: var mod = require('path/'+name+'.js'); See More

Top Pro

Tap into npm's huge module ecosystem

Using browserify opens you up to npm, that has over 80k modules of which a great amount work both client-side and server-side. And the list is growing rapidly. See More

Top Pro

Friendly plugin interface

Writing plugins is relatively easy and straight forward as each file, you can run a function that gives a file name and path, based on that you can decide if you want to do something like parse, transform, modify etc the file or skip it. See More

Top Pro

Share the same modules client-side and server-side

Because browserify allows you to use the same require() function as node.js, you can easily share modules between the client-side and server-side. See More

Top Pro

deAMDify & debowerify allow using modules written for other systems

Browserify includes transforms such as deAMDify, that allow you to use modules written in the AMD module format, and debowerify, that allows you to use modules intended to be managed by Bower package manager. See More

Top Pro

CJS module format

Angular

Add Video or Image

Brunch

Add Video or Image

Top Pro

Skeletons

Ready made application boilerplates that provide a good starting point for your application. See More

Top Con

Testing

Testing is a little cumbersome. See More

Specs

Number of Plugins:~100

Processing method:Pipeline

Task instruction style:Code

Top Pro

Plugins

A large selection of plugins are available. See More

Top Pro

Concatenates scripts and styles and auto-generates matching source maps

Brunch automatically produces a source map for all javascript files and CSS stylesheets whenever it minifies an app's resources. This little feature is extremely helpful when debugging is required at the client end. See More

Top Pro

Time to setup is extremely low

After installing Brunch the next step is to load a skeleton from git.io/skeletons. This step is as easy as installing another plugin from the npm registry, just point Brunch to the path of the required skeleton/generator then wait for it to work out its magic. Next, run brunch build then wait for a second or two and voila! The project is ready. See More

Top Pro

Compilation is super fast

According to speed benchmarks, Brunch is one of the fastest tools around for compiling files. According to the authors of Brunch the reason behind this speed is that it recompiles only the changes that were made to an app and performs extensive caching of the app's code. See More

Top Pro

Handle different js/css bundles

Allow to compile and bundle js/es20xx/sass etc. without pain See More

Top Pro

Small configs

JSPM

Add Video or Image

Top Pro

Module style agnostic

Loads ES6, AMD, CommonJS and globals. See More

Top Con

Poor bundler performance

Bundling performance is slow, though offset by the fact that bundling is not required during development, since it can load dependencies asynchronously. See More

Top Pro

Registry agnostic

JSPM is registry agnostic, it can pull packages from npm and github and is built in such a way it can support more. See More

Top Pro

Versioned package urls

It creates a packages folders which are versioned. This makes it future proof for a time where we stop bundling all the code. In the following presentation Guy Bedford calls bundling an anti-pattern. See More

Top Pro

Module loading

Could use a module loader or use the bundle without config anything. See More

Top Pro

Don't need to bundle again with every change

A bundle is very difficult to debug in mid-big projects (20k lines). JSPM allow you to develop without generate a bundle. See More

Require.js

Add Video or Image

Top Pro

Simple

Because of its easy to understand documentation, the RequireJS module loader is super simple to use; module definitions are as easy as defining just a key/value pair. See More

Top Con

Not the best solution for sharing client-side and server-side code

RequireJS is awesome for bundling and managing dependencies in an async manner. But the server-side needs neither of this killer features. Because of this it's not as good if your building a library that should work on both client and server (i.e. PouchDB). See More

Brian Genisio's Experience

This isn't really a bundler. It is more of a loader, but there are better ones out there. See More

Top Pro

Has a RequireJS optimizer

After building all the modules to be loaded, the built files can be optimized as well (minified and joint together), even though this is a completely optional step, but doing so could be a lot beneficial for your site's performance. See More

Top Con

Quietly fails with circular references

If you create a circular reference, the side loaded last will fail with a confusing error that makes it look like the reference doesn't exist. See More

Ɐha Hah's Experience

Combine with grunt/gulp for bundling via r.js Optimizer. Use HATEOAS over REST and hot swap namespace change potential of networked structure. See More

Top Pro

Hot loading of modules out-of-box

Lazy loading modules as a primary feature See More

Top Pro

Well documented

The RequireJS module loader is extremely well documented. So no matter whether you're a pro at JS based web development or just a newbie, you will find the documentation very helpful whenever you're stuck or just starting out. Everything is well-defined and logically placed in proper sections in a manner such that it is very easy to understand. See More

Top Pro

Well tested

Since the RequireJS is quite popular among the dev community, that automatically means that problems get sorted out very quickly and most of the core code has already been tested. See More

Top Pro

No necessary build step

Not only do you not need a server, it works in browser without a build step. See More

Top Pro

AMD & CJS support

While RequireJS is mainly an AMD implementation, it can, with rare exceptions, implement CJS as well. See More

Top Pro

Supports nested dependencies

If your project has nested dependencies, you won't have to worry about resolving them at all. Because RequireJS will do that for you. See More

Top Pro

You don't need a server to get started

One of the best advantages of RequireJS over Browserify is that you don't need a nodejs environment to get started. Just "require" your dependencies and it takes care of loading them. By contrast, Browserify requires a running NodeJS implementation so you can build your one monolithic file, then you can push the file to your static web server. See More

Top Pro

Works with basically every desktop browser, even IE6

RequireJS supports IE6+, FF2+, Safari3.2+, Chrome3+ & Opera 10+. See More

stealjs

Add Video or Image

Bit Bundler

Add Video or Image

Request recommendations from the community

Explore Related Questions

Help millions of people make better decisions.

Each month, over 2.8 million people use Slant to find the best products and share their knowledge. Pick the tags you’re passionate about to get a personalized feed and begin contributing your knowledge.

\n\t \n\t