For this tutorial, you’ll need the following:
- Node.js 10x or higher
- Yarn / npm 5.2 or higher installed on your PC
Pros of using Rollup.js
- Fast builds
- Less and easier configuration compared to Webpack
- 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:
npm install rollup --save-dev
yarn -D add rollup
If you installed Rollup globally, you can quick start it by running the following commands, depending on your development environment:
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.
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:
npx rollup --config
yarn rollup --config
For more information on how to use Rollup.js in your project, you can check the tutorials and official documentation here.
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 global add parcel-bundler
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>
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.
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.
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
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:
npm install --save-dev snowpack
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:
Building for production
Next, build your application for production:
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.
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.
It is still experimental, currently in version 0.72, and actively being developed.
Features of esbuild
- Extremely fast builds
- Code-splitting support
- 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
esbuild is still highly experimental but it can be installed by running the following commands:
npm install --save-dev esbuild
yarn add --dev esbuild
You can also install esbuild locally by running the following command:
npm install --global 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
For more information on esbuild, visit the website here.
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
To install Packem, run the following command in your terminal:
npm install -g packem
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"
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
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.
Debugging code is always a tedious task. But the more you understand your errors the easier it is to fix them.