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

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