This content originally appeared on DEV Community and was authored by Burhanuddin Udaipurwala
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".
If you just want to see and use the end result without following through this guide, you can go directly to the GitHub Repo
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
-
sourcetells Parcel the entry point of your project -
mainwill be the path for generating your output JS bundle -
modulepath 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 main 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": {
"start": "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 install -D react react-dom parcel
Also add React as a peer dependency in your project. Add to package.json
"peerDependencies": {
"react": "^16.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
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 start
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
This content originally appeared on DEV Community and was authored by Burhanuddin Udaipurwala
Burhanuddin Udaipurwala | Sciencx (2021-10-17T14:29:57+00:00) Bundle a React library with Parcel. Retrieved from https://www.scien.cx/2021/10/17/bundle-a-react-library-with-parcel/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.