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 ! **