How to create TypeScript NPM package project

Sometimes you want to create your own npm package. Here is the way to set up an npm package in TypeScript.

In your project directory, initialize the npm object.

npm init

Install development dependencies.

npm install --save-dev typescript ts-node

ts-node enables you to directly execute TypeScript on Node.js. See more on the package website.

Set up the TypeScript project.

npx tsc --init

In the generated tsconfig.json, set outDir to dist.

...
"outDir": "./dist", /* Specify an output folder for all emitted files. */
...

In the root directory, create the src folder and in the folder index.ts which will be the entry point in your package.

mkdir src
touch ./src/index.ts

Create a .gitignore file.

/node_modules
# Ignore test-related files
/coverage.data
/coverage/
# Build files
/dist

Install the tsup package. It is a bundler and is powered by esbuild.

In the context of JavaScript, a bundler is a tool that takes multiple JavaScript files and their dependencies and combines them into a single file or a few files, which can then be included in a web application. The main purpose of a bundler is to manage and optimize the delivery of code to the browser, enhancing performance and simplifying development.


npm install --save-dev tsup

In the root directory, create the tsup.config.ts file.

import { defineConfig } from "tsup";
export default defineConfig({
entry: ["src/index.ts"],
format: ["cjs", "esm"], // Build for commonJS and ESmodules
dts: true, // Generate declaration file (.d.ts)
splitting: false,
sourcemap: true,
clean: true,
});

Update these properties in package.json

...
"main": "./dist/index.js",
"module": "./dist/index.mjs",
"types": "./dist/index.d.ts",
"files": [
    "dist"
],
"scripts": {
    "build": "tsup"
},
...

In your index.ts, create a trivial function you will export in this package.

export function add(a: number, b: number): number {
  return a + b;
}

Build your package with npm run build. In the dist directory, you will see the build of your project.

TADA! Now you have a base project for your npm package.

Loading

Tags