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](https://www.npmjs.com/) modules and [TypeScript](http://www.typescriptlang.org/) lint/configuration as the host project (and keep it in the same codebase).

In the ~~distant~~ past I would have turned to [Gulp](https://gulpjs.com/), or [Grunt](https://gruntjs.com/) before that. My first instinct nowadays was [Webpack](https://webpack.js.org/) 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](https://rollupjs.org/), but ran into some headaches with the [`rollup-typescript`](https://github.com/ezolenko/rollup-plugin-typescript2) plugin and including dependencies in my bundle.

As a result of my research I came upon [Parcel](https://parceljs.org/), 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](https://parceljs.org/features/cli/).

## 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](https://parceljs.org/features/plugins/). 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](https://github.com/facebook/create-react-app) or [Next.js](https://github.com/zeit/next.js/).