How to make your own NPM package (Step-by-Step) 📦

Introduction

In this tutorial, you'll learn how to create your own NPM package from scratch. This step-by-step guide will cover everything from setting up your NPM account to publishing your package. Whether you're looking to share your code with others or just want to learn how to package your projects, this guide is for you.

Step 1: Set Up Your NPM Account

• Go to the NPM website and sign up for an account if you don't already have one.
• Verify your email address to activate your account.

Step 2: Authenticate Your Terminal with NPM

• Open your terminal.
• Use the following command to authenticate:

  npm login
  

• Enter your username, password, and email associated with your NPM account.

Step 3: Set Up Your NPM Project

• Create a new directory for your project:

  mkdir my-npm-package
  cd my-npm-package
  

• Initialize your NPM package by running:

  npm init
  

• Follow the prompts to fill in the necessary information, such as package name, version, description, entry point, etc.

Step 4: Install Dependencies

• Determine what dependencies you need for your project and install them. For example:

  npm install typescript
  

Step 5: Configure TypeScript

• Create a tsconfig.json file to configure TypeScript settings. You can use the following template:

  {
    "compilerOptions": {
      "target": "es5",
      "module": "commonjs",
      "outDir": "./dist",
      "strict": true
    },
    "include": ["src/**/*.ts"],
    "exclude": ["node_modules", "**/*.spec.ts"]
  }
  

• This configuration sets the output directory and includes the necessary files.

Step 6: Configure TSUP

• Create a tsup.config.ts file to configure TSUP for bundling your package. Here’s a basic example:

  import { defineConfig } from 'tsup'
  
  export default defineConfig({
    entry: ['src/index.ts'],
    format: ['cjs', 'esm'],
    sourcemap: true,
    clean: true,
  })
  

Step 7: Configure Scripts

• Open your package.json file.
• Add the following scripts under the "scripts" section:

  {
    "build": "tsup",
    "test": "echo \"Error: no test specified\" && exit 1"
  }
  

• This allows you to build and test your package easily.

Step 8: Set Up Project Structure

• Organize your project files. A common structure might look like this:

  my-npm-package/
  ├── src/
  │   └── index.ts
  ├── dist/
  ├── package.json
  ├── tsconfig.json
  └── tsup.config.ts
  

Step 9: Transpile TypeScript Code

• Run the build script to transpile your TypeScript code into JavaScript:

  npm run build
  

Step 10: Ignore Files for GitHub and NPM

• Create a .gitignore and a .npmignore file to specify which files should be ignored in your repositories:

  node_modules/
  dist/
  *.log
  

Step 11: Create README.md

• Write a README.md file that describes your package, how to install it, and how to use it. This is important for users who will consume your package.

Step 12: Push Code to NPM

• Make sure you are logged in and then publish your package:

  npm publish
  

• Confirm that your package is now available on the NPM registry.

Conclusion

Congratulations! You've successfully created and published your own NPM package. You can now share your work with others or use it in your own projects. As a next step, consider enhancing your package with additional features or exploring how to manage versioning and updates on NPM.