Shedrack Akintayo Shedrack Akintayo is a software engineer from Lagos, Nigeria, who has a love for community building, open-source, and creating content and tech for the next billion users.

The top latest build tools for JavaScript

7 min read 1973

JS Build Tools

Introduction

Over the years, we’ve seen various JavaScript build tools arise, right from the era of Google Closure Tools to today. There’s been great improvement in JavaScript build tools, especially when it comes to build time, speed, customization, configuration, and extensibility.

In this article, we’ll explore the latest build tools that the JavaScript ecosystem uses.

Prerequisites

For this tutorial, you’ll need the following:

Rollup.js

Rollup.js Project

According to its official website, “Rollup is a module bundler for JavaScript that compiles small pieces of code into something larger and more complex, such as a library or application.” Its first version was released in December 2018, but it didn’t gain popularity until late 2019.

Currently in version 2, Rollup has now become the standard for building JavaScript packages and modules. It’s been adopted by several organizations and individual developers around the world.

Pros of using Rollup.js

The following are some of the cool features that Rollup offers to JavaScript developers:

  • Fast builds
  • It’s easy to learn and get started with, as well as publish JavaScript packages
  • Code-splitting
  • Less and easier configuration compared to Webpack
  • Perfect for JavaScript libraries
  • Plugins for better builds and customizations, along with custom plugin support
  • It provides a smaller bundle size and produces clean code
  • Provides awesome support for ES Modules

Cons of using Rollup.js

  • No out-of-the-box support for async/await

Getting started with Rollup.js

To get started with Rollup, you need to install the package on your machine by running the following command:

npm install --global rollup

This command will install Rollup globally, so you don’t need to re-install it on your machine when you need it next.

If you need to, you can install it locally for a particular project on your machine by running the following commands:

We made a custom demo for .
No really. Click here to check it out.

npm

npm install rollup --save-dev

yarn

yarn -D add rollup

If you installed Rollup globally, you can quick start it by running the following commands, depending on your development environment:

For browsers:

rollup <your application entry point> --file bundle.js --format iife

This command will compile the code in your application entry file (e.g., main.js or script.js), including its imports into a single file (bundle.js) and then serve it to the browser as an IIFE (Immediately Invoked Function Expression) in a script tag.

For Node.js:

rollup <your application entry point> --file bundle.js --format cjs

This command will compile the code in your application entry file in CommonJS format (e.g., main.js or script.js), including its imports into a single file (bundle.js) so that it can be recognized and executed by Node.js.

For both browsers and Node.js:

rollup <your application entry point> --file bundle.js --format umd --name "myBundle"

This compiles your application code in UMD format into a single file (bundle.js) for both the browser and Node.js.

If you installed Rollup locally, you can start it by running the following command in the root folder of your project:

npm:

npx rollup --config

yarn:

yarn rollup --config

Closing thoughts

Rollup might not be entirely new like other build tools available now, but it’s been adopted by many JavaScript developers. In my opinion, if you need a build tool or bundler for your JavaScript package or library, Rollup.js is your best bet.

For more information on how to use Rollup.js in your project, you can check the tutorials and official documentation here.

Parcel

Parcel bundle

Parcel is one of the latest JavaScript bundlers in the ecosystem. Its official documentation describes it as “a web application bundler, differentiated by its developer experience.”

Released in 2019, Parcel is fast, and it requires zero configuration, unlike Rollup.js and Webpack. It’s essentially a plug-and-play bundler that is currently in version 2, beta 1 at the time of this publication.

Parcel bundles your code by taking all of your project files and dependencies, transforming them, then merging them together into smaller pieces of files that can be used to execute your code.

In the documentation for its v2 release, Parcel is referred to as “a compiler for all your code, regardless of the language or toolchain.”

Pros of using Parcel

  • Blazingly fast builds
  • Awesome developer experience
  • Zero configuration — just install and get started
  • Plugin support, although you don’t necessarily need plugins
  • Custom plugins support
  • Multi-core processing
  • Support for low-level languages like Rust and anything that compiles to WebAssembly (WASM)
  • Hot Module Replacement (HMR)support out of the box
  • Support for code-splitting out of the box
  • Support for low-level languages like rust and also WASM
  • Support for React and Typescript out of the box

Cons of using Parcel

  • Some issues arise when trying to use the latest ES7 features (constructs)
  • High complexity arises when developers include some extra plugins for Babel

Getting started with Parcel

Parcel is a zero-configuration build tool, so getting started is easy. First, install Parcel in your project by running the following command:

yarn:

yarn global add parcel-bundler

npm:

npm install -g parcel-bundler

After installing it in your project (or globally), you can bundle your project by running the following command:

parcel <your application entry point>

Parcel provides a fast development server, which will automatically rebuild your application code as you make any changes. It also provides support for Hot Module Replacement to increase your development speed.

Building for production

You can build your application code for production with Parcel by running the following command:

parcel <your application entry point>

Closing thoughts

Parcel is an awesome compiler that doesn’t require using plugins for most tasks. When version 2 is finally available for the public, it’ll be a game-changer.

Parcel’s zero-config nature and its support for low-level languages like Rust and WebAssembly make it multi-purpose, and not just for the JavaScript ecosystem.

For more information on how to use Parcel in your project, you can check its official documentation here and it’s v2 documentation that is still in development here.

Snowpack

Snowpack project

According to its official website, “Snowpack is a modern frontend build tool for faster web development. It replaces heavier, more complex bundlers like Webpack or Parcel in your development workflow.”

Snowpack was built as a replacement for Webpack and Parcel, and that’s its main selling point. Its best feature is that it skips the bundling process in development, making development fast because there is nothing to build. It’s a much faster build tool than Webpack, Rollup, and Parcel.

Snowpack is in version 2.7. You can also read my article on the release of Snowpack v2 here.

Features of Snowpack

  • O(1) build times
  • No bundling in production
  • Lightning-fast builds
  • Hot Module Replacement support
  • Out-of-the-box support for TypeScript, JSX, CSS Modules, and the like
  • Simple tooling
  • App templates for developers

Cons of using Snowpack

  • No in-built production bundler

Getting Started

To get started with Snowpack, you need to first install it in your project and launch its development server. You can do that by running the following commands:

Installation

npm:

npm install --save-dev snowpack

yarn:

yarn add --dev snowpack

According to its official website, Snowpack can also be installed globally, but I recommend that you install it locally.

Starting the development server

The following command will start the Snowpack development server and load your site locally:

snowpack dev

Building for production

Next, build your application for production:

snowpack build

Note: Snowpack does not come with an in-built bundler for production because it gives you an optimized version of your code. If you need to build your application for production, you can easily connect it to your favourite bundler via a plugin.

Closing thoughts

Snowpack is a next-generation build tool that leverages on ES Modules to deliver builds quickly and skip the bundling process in development. It also helps make the development environment build faster even as your codebase grows.

For more information on how to use Snowpack in your project, you can check its official documentation here.

esbuild

Esbuild Project

esbuild is an extremely fast next-gen JavaScript bundler and minifier. It packages up JavaScript and TypeScript code for distribution on the web. It was written in Go, making it extremely fast. It’s also lighter than other bundlers, including Parcel and Webpack.

Here is a graph of its JavaScript and TypeScript benchmark:

Javascript Benchmark Graph

It is still experimental, currently in version 0.72, and actively being developed.

Features of esbuild

  • Extremely fast builds
  • Loaders for Typescript, JavaScript, and JSON
  • Minification
  • Code-splitting support
  • Bundling
  • Tree-Shaking
  • Support for various output formats like CJS, IIFE, and ESM
  • Source map generation
  • Transpilation of JSX and newer JS syntax down to ES6

Cons of using esbuild

  • Still experimental, so there’s no major version yet
  • No HRM

Getting Started

esbuild is still highly experimental but it can be installed by running the following commands:

Installation

npm:

npm install --save-dev esbuild

yarn:

yarn add --dev esbuild

You can also install esbuild locally by running the following command:

npm install --global esbuild

Using esbuild

For example, if you have a single React file like this:

//hello.tsx
import * as React from 'react'
import * as ReactDOM from 'react-dom'

ReactDOM.render(
  <h1>Hello, esbuild!</h1>,
  document.getElementById('root')
);

We can bundle it for development by running the following command:

esbuild hello.tsx --bundle '--define:process.env.NODE_ENV="development"' --outfile=src.js

We can also bundle it for production by running this:

esbuild hello.tsx --bundle '--define:process.env.NODE_ENV="production"' --outfile=build.js

Closing thoughts

esbuild is a new and experimental JavaScript bundler, but it’s fast and provides out-of-the-box support for TypeScript.

For more information on esbuild, visit the website here.

Packem

Packem is a pre-compiled JavaScript bundler primarily implemented in Rust. It can also compile other file types like YAML/TOML. Packem uses YAML to structure configuration data instead of JSON.

Pros of using Packem

  • It’s 2x faster than Parcel
  • Lightweight and efficient build outputs
  • Easy configuration
  • YML for data structuring
  • Code-splitting support with dynamic imports
  • Plugins for a better development experience

Cons of using Packem

  • Seeds a much more verbose API
  • It has a low adoption rate

Installation

To install Packem, run the following command in your terminal:

npm:

npm install -g packem

yarn:

yarn global add packem

Creating the configuration file

In order to use Packem in your project, you’ll have to create a .packemrc file in the root folder of your project. This file will contain all the necessary configuration options for your project. In this file, you’ll need to define the following fields:

input: "./src/index.js"
output: "./dist/bundle.js"
format: "iife"

The input field is where the bundling process starts, and the output field is where your final concatenated bundle ends up. You need to point to an existing file (no dynamic file creations) to get the input point right. The format option will hold the format you want your JavaScript file to be processed as. Packem takes care of the rest of the process according to how you’ve defined it.

In order to build your project, you’ll need to run pakem in the root folder of your project. Then you’re good to go.

Closing thoughts

Packem is a neat build tool, especially because it’s Rust based, so it uses YML for data structuring. It’s lightweight, too. Adoption is still low, but it should be more widely adopted soon, given that JavaScript is gradually moving toward Rust-based tools.

Conclusion

In this blog post, we’ve explored various JavaScript build tools that many developers use. Moving forward, we expect build tools to continue having faster builds, as well as better customizations and zero-prototyping and configurations, more out-of-the-box support, and more Rust-focused core technology.

You come here a lot! We hope you enjoy the LogRocket blog. Could you fill out a survey about what you want us to write about?

    Which of these topics are you most interested in?
    ReactVueAngularNew frameworks
    Do you spend a lot of time reproducing errors in your apps?
    YesNo
    Which, if any, do you think would help you reproduce errors more effectively?
    A solution to see exactly what a user did to trigger an errorProactive monitoring which automatically surfaces issuesHaving a support team triage issues more efficiently
    Thanks! Interested to hear how LogRocket can improve your bug fixing processes? Leave your email:

    : Debug JavaScript errors easier by understanding the context

    Debugging code is always a tedious task. But the more you understand your errors the easier it is to fix them.

    LogRocket allows you to understand these errors in new and unique ways. Our frontend monitoring solution tracks user engagement with your JavaScript frontends to give you the ability to find out exactly what the user did that led to an error.

    LogRocket records console logs, page load times, stacktraces, slow network requests/responses with headers + bodies, browser metadata, and custom logs. Understanding the impact of your JavaScript code will never be easier!

    .
    Shedrack Akintayo Shedrack Akintayo is a software engineer from Lagos, Nigeria, who has a love for community building, open-source, and creating content and tech for the next billion users.

    Leave a Reply