Create a typescript package with Parcel

So, you've got this idea for a TypeScript package, but configuring build tools isn't your idea of a good time? Parcel is there to save the day!

Parcel is a fast and zero-configuration web application bundler designed to simplify the build process for modern web projects. It's not limited to web applications, and it can be used to build packages targeting the browser or Node.js.

In this tutorial, we will create a new typescript package using Parcel and configure it to output both CommonJS and ECMAScript modules.

Create a new typescript package

Start by creating a new directory and initializing your project with npm:

mkdir my-package
cd my-package
npm init -y
npm install --save-dev typescript parcel @parcel/packager-ts @parcel/transformer-typescript-types @parcel/validator-typescript

This will create a new directory called my-package and initialize a new package.json file with the default values and install the required dependencies.

Configure Parcel

To configure Parcel, we need to edit the package.json file and add the following configuration:

{
  "type": "module",
  "source": "src/index.ts",
  "main": "dist/index.cjs",
  "types": "dist/index.d.ts",
  "module": "dist/index.js"
}

This configuration tells Parcel to use src/index.ts as the entry point for our package, and to output the CommonJS module to dist/index.cjs, the ECMAScript module to dist/index.js, and the types to dist/index.d.ts.

Then, we add the scripts to the package.json file to build our package. Add the following scripts to the package.json file:

{
  "scripts": {
    "watch": "parcel watch",
    "build": "parcel build"
  }
}

Parcel do not automatically typecheck the code, so we need to tell it to use the typescript validator. To do this, add the following configuration to a new .parcelrc file:

{
  "extends": "@parcel/config-default",
  "validators": {
    "*.{ts,tsx}": ["@parcel/validator-typescript"]
  }
}

Configure typescript

To configure typescript, add the following configuration to a new tsconfig.json file:

{
  "include": ["src/**/*"],
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true
  }
}

Create the source code

Now, let's create the source code for our package. Create a new directory called src, and create a new file called index.ts inside the src directory. Add the following code to the index.ts file:

export const hello = (name: string) => `Hello, ${name}!`;

Build the package

To build our package, run the following command in your terminal:

npm run build

This will compile the typescript code and bundle the package using Parcel. You should see the CommonJS, ECMAScript, and types output in the dist directory.

In development, if you want to watch for changes and rebuild the package automatically, you can run the following command:

npm run watch

Conclusion

Thanks to Parcel, creating a modern typescript package is a breeze. With zero configuration, Parcel simplifies the build process and allows you to focus on writing code. It's a great alternative to other bundlers like Webpack, Rollup or tools like tsup.

Now you are ready to publish your awesome package to npm and share it with the world! 🌍✨