For this tutorial, you’ll need the following:
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.”
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.
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.
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.
The following command will start the Snowpack development server and load your site locally:
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.
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.
To install Packem, run the following command in your terminal:
npm install -g packem
yarn global add packem
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.
LogRocket works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred. LogRocket also monitors your app’s performance, reporting metrics like client CPU load, client memory usage, and more.
Build confidently — start monitoring for free.
Angular’s new `defer` feature, introduced in Angular 17, can help us optimize the delivery of our apps to end users.
ElectricSQL is a cool piece of software with immense potential. It gives developers the ability to build a true local-first application.
Leptos is an amazing Rust web frontend framework that makes it easier to build scalable, performant apps with beautiful, declarative UIs.