Creating and publishing an NPM package can enhance your portfolio and allow you to share reusable code with the community. Recently I released my own first package, a manga web reader (github.com/Mangatsu/mangatsu-reader) that is still very much experimental. This guide will walk you through setting up a repository for a TypeScript project, as well as configuring the project with useful linting software, and finally how to build and publish your package to NPM.
Prerequisites
npm v10.0.0+
Internet connection
Step 0: Choose your license
As for npm packages, usually MIT (or ISC) is recommended for the straightforwardness and ease of use. Sometimes, depending on the use case, Apache 2.0 with patent grant or strong copyleft license like (A)GPL 3.0 might fit your needs as well. Be sure to remember to create the LICENSE (or COPYING) file!
Step 1: Setting up the NPM package
Initialize your NPM package: Start by creating a new directory for your project and navigating into it. Then initialize your project using npm init.
This will generate a package.json file with default configurations.
Initialize git with git init and create .gitignore file
Install TypeScript and related dependencies: To get started with TypeScript, you need to install TypeScript as well as some type definitions + rimraf for cleaning up
Set up TypeScript configuration: Create a tsconfig.json file for your TypeScript configuration.
This setup ensures that TypeScript compiles source files from the src directory and outputs them into the lib directory.
Step 2: Setting up linting (ESLint, Prettier, Husky)
Install dev dependencies:
Create configuration files:
eslint.config.mjs:
(Optional) Setting up Husky pre-commit hook for automatic linting
Install Husky and lint-staged:
Configure lint-staged: Add a lint-staged configuration to run Prettier and ESLint on staged files before committing. In your package.json, add the following:
Add pre-commit hook:
Step 3: Setting up the build process
Update the build script: Add a tsc, clean and build commands to your package.json using the TypeScript compiler (tsc).
Running npm run build will compile your TypeScript files from src to the lib directory.
Copy assets after the build: If your package includes non-TypeScript files (e.g., images, JSON files, etc.), you can add a script to copy those assets to your lib folder. In package.json, add the following script:
Final build command
Step 4: Publishing to package npm
Login to NPM: npm login
Update your package.json with metadata: Ensure your package.json has a valid name, version, description, main, license, and files field. The files field specifies which files are included in the package:
Publish the package: npm publish. If it's your first time publishing, you can use npm publish --access public to make it publicly accessible.
Conclusion
You've now created a TypeScript NPM package with linting, formatting, pre-commit hooks, and a build process that handles asset copying. Whether you're publishing utility functions or a full-fledged library, this setup will help ensure a smooth workflow and quality code.
By following this guide, you should now be able to confidently publish your TypeScript packages to NPM and manage a clean, maintainable codebase.