# [Part -2 ] Build & Publish React component as NPM package using Parcel

In the [previous article](https://creativedevs.hashnode.dev/part-1-build-publish-react-component-as-npm-package-using-typescript-compiler) 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](https://parceljs.org/).

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](https://parceljs.org/getting-started/library/).

Now let's go through the steps to build the project -

* \*\*Install Parcel \*\*
    

```plaintext
npm install --save-dev parcel @parcel/transformer-typescript-types @parcel/packager-ts
```

or

```plaintext
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 ).

```json
"scripts": {
    "build": "parcel build"
}
```

* \*\*Update source, module, types paths in package.json \*\*
    

```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 -

```json
{
  "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](https://creativedevs.hashnode.dev/part-1-build-publish-react-component-as-npm-package-using-typescript-compiler)) 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.

```plaintext
npm run build
```

* **Update .npmignore**
    

This is to ignore .parcel-cache directory while publishing the package.

```plaintext
/src
/.parcel-cache
```

* \*\*Publish \*\*
    

Now you can update the package version and publish your package.

```plaintext
npm publish
```

\*\*Thanks ! \*\*