In the previous article we used typescript complier to build the react component. In this one we will see how to build it using parcel.
Parcel is a zero configuration build tool. checkout their amazing website here.
It is pretty easy to setup a project using parcel. since we are building an independent react component we need to build it as a library.
Now let's go through the steps to build the project -
- **Install Parcel **
npm install --save-dev parcel @parcel/transformer-typescript-types @parcel/packager-ts
or
yarn add -D parcel @parcel/transformer-typescript-types @parcel/packager-ts
- **Add build script to package.json **
This will build your project and export the files in the specified directory ( dist/ in this case ).
"scripts": {
"build": "parcel build"
}
- **Update source, module, types paths in package.json **
{
"source": "./src/index.ts", // path to starting point in library
"module": "./dist/index.js", // output directory path i.e dist
"types": "./dist/index.d.ts", // path where the types will be exported
}
module tells parcel that the output will be an es module.
now your package.json should look like -
{
"name": "react-toggle-button",
"version": "0.0.1",
"description": "React toggle button",
"source": "./src/index.ts",
"module": "./dist/index.js",
"types": "./dist/index.d.ts",
"scripts": {
"build": "parcel build" // command to build the project
},
"repository": {
"type": "git",
"url": "git+https://github.com/YOUR-REPO/react-toggle-button.git"
},
"keywords": [
"react",
"react-toggle-button"
],
"author": "AUTHOR NAME",
"license": "ISC",
"bugs": {
"url": "https://github.com/YOUR-REPO/react-toggle-button/issues"
},
"homepage": "https://github.com/YOUR-REPO/react-toggle-button#readme",
"devDependencies": {
"@parcel/packager-ts": "2.7.0",
"@parcel/transformer-typescript-types": "2.7.0",
"@types/react": "^18.0.18",
"@types/react-dom": "^18.0.6",
"parcel": "^2.7.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"typescript": "^4.8.3"
},
"peerDependencies": {
"react": "^18.2.0" // add react as a peer dependency
},
"files": [
"/dist" // tells the bundler to only add dist folder while publishing the package. package.json will be automatically added.
]
}
you can remove tsc-hooks from package.json and tsconfig.json (added in part 1) since parcel will take care of all the css bundling and will export it to dist directory.
- **Build the project **
This will bundle your react component and export the files in the dist directory. These are the files which we want to publish as a package.
npm run build
- Update .npmignore
This is to ignore .parcel-cache directory while publishing the package.
/src
/.parcel-cache
- **Publish **
Now you can update the package version and publish your package.
npm publish
**Thanks ! **