Easy JS bundles with Parcel

I recently had the need to host a script separately from the bundle of the main app I was working on. This script was to be included on any given webpage along with some configuration to embed an iframe containing a separate app within it. My desire was to be able to have access to the same NPM modules and TypeScript lint/configuration as the host project (and keep it in the same codebase).

In the distant past I would have turned to Gulp, or Grunt before that. My first instinct nowadays was Webpack as I've used recently, though it seemed a little heavy-handed for what I needed. At Brad's recommendation I did some investigation into Rollup, but ran into some headaches with the rollup-typescript plugin and including dependencies in my bundle.

As a result of my research I came upon Parcel, which to be honest looked too good to be true. Parcel is similar to Rollup, except that it claims to be "zero configuration". I thought it was worth trying out, because if it lived up to the hype, it would solve my current problem very quickly and easily.

Parcel is a web application bundler, differentiated by its developer experience. It offers blazing fast performance utilizing multicore processing, and requires zero configuration.

Getting started with Parcel 😍

To use Parcel in a project, we first need to install it as a dev dependency.

npm install parcel-bundler --save-dev # or yarn add parcel-bundler --dev

Parcel will take an entry point of either a specific file, or a directory where it will look for an index.* file.

In my case, I'll be compiling a single TypeScript file at src/index.ts:

import { method } from "module";

// Do all the things...

In package.json

{
    "scripts": {
        "start": "parcel src",
        "build": "parcel build src"
    }
}

By default npm run build will build to ./dist.

Configuration

In my case, I wanted to export my script to a specific public directory of my main app, so that it would be deployed alongside static assets. To achieve this I just set a specific out-dir flag to the parcel build command. My embed scripts look like:

{
    "scripts": {
        "watch:embed": "parcel embed/embed.ts",
        "build:embed": "parcel build embed/embed.ts --no-source-maps --out-dir src/assets"
    }
}

You can find all the available options here.

Going forward

I love how easy it is to use Parcel. I could foresee there being issues when you want to customise beyond what they offer out of the box, though they do mention a plugin implementation. I've not needed to use that as yet, as they support everything I've needed so far.

The example above was just for bundling a single TypeScript file, but I've played around with a simple static React app as well, and it seems Parcel offers a real alternative to projects like Create React App or Next.js.