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
-
source
tells Parcel the entry point of your project -
main
will be the path for generating your output JS bundle -
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
Top comments (0)