Bundle a React library with Parcel

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

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

"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

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

"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

yarn add -D react react-dom parcel

Also add React as a peer dependency in your project. Add to package.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

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

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

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

yarn build

This will generate the output inside the dist directory

You can run

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

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