Bundle a React library with Parcel
Tags: parcel, react
Published: 2021-10-17 14:29:57

Parcel is a bundler for Javascript and Typescript projects. They recently released version 2 of the project, and it comes with a lot of performance and usage improvements. It automatically installs required dependencies without having to do any complex config or setup. It really lives upto its name when it says it's "The zero configuration build tool".

## Initialise your project

Create a new project with either `npm` or `yarn`. For this guide, I will be using `yarn`
To create a new project

```shell
yarn init
```

Then follow through the guide to create your `package.json` file.

Since this is a library, you need to add the following lines to your `package.json` file so that the consumers of your library can automatically figure out the build paths

1. `source` tells Parcel the entry point of your project
2. `main` will be the path for generating your output JS bundle
3. `module` path creates an ES Module target

```json
"source": "src/index.js",
"main": "dist/main.js",
"module": "dist/module.js",
```

if you are using Typescript you can change the `source` property to `src/index.ts` instead and add `"types": "dist/types.d.ts"` to tell Parcel where to spit out types for your library

To generate a `tsconfig.json` file for your project, run

```shell
npx tsconfig.json
```

and select React from the menu. That will generate the appropriate config.

After that, add the following scripts to your `package.json` file

```json
"scripts": {
	"dev": "parcel watch",
	"build": "parcel build"
},
```

You will use these scripts to develop and build your project later

## Installing dependencies

We need to install Parcel, React and React DOM as dev dependencies

```shell
yarn add -D react react-dom parcel
```

Also add React as a peer dependency in your project. Add to `package.json`

```json
"peerDependencies": {
    "react": "^18.0.0"
}
```

This tells library consumers what version of React your library supports

Optionally, if you are using Typescript, you also need to install Typescript

```shell
yarn add -D typescript @types/react @types/react-dom
```

## Creating a component

To demonstrate the bundling process. I created two files in the `src` directory. Create a directory called `src` and add the following files

`Button.tsx`

```ts
import * as React from 'react'

export interface IButton extends React.HTMLProps<HTMLButtonElement> {}

const Button: React.FC<IButton> = ({ children, onClick }) => {
  return <button onClick={onClick}>{children}</button>
}

export default Button
```

`index.ts`

```ts
import Button from './Button'

export { Button }
```

Your directory structure should now look like

```
src
	-> index.ts
	-> Button.tsx
package.json
yarn.lock
```

## Bundling

To build your project, run

```shell
yarn build
```

This will generate the output inside the `dist` directory

You can run

```shell
yarn dev
```

to start a development server and Parcel will listen to changes in your files

## Closing note

I think Parcel v2 is a fantastic bundler and simplifies project configuration. It automatically detects the framework and language you are using and will install appropriate helper packages

Checkout the Parcel website (Its pretty cool!) - [Parcel](https://parceljs.org/)

You can follow me on DEV or subscribe to my newsletter at https://www.burhanuday.com/ to get notified when I publish my next article