How to create your first npm package in NodeJs with Typescript.

How to create your first npm package in NodeJs with Typescript.

NPM stands for Node Package Manager, and it is a package manager for Node.js. It is the default package manager for Node.js, and it allows developers to easily install, share, and manage dependencies for their Node.js projects.

Creating an NPM package is a great way to share your code with other developers and make it more reusable. TypeScript, a superset of JavaScript, makes it easy to write type-safe code, and it can also be used to create NPM packages. In this blog, we will walk through the process of creating your first NPM package in TypeScript.

Step 1: Set Up Your Project

First, create a new directory for your project and navigate into it using the terminal. Run the following command to initialize a new Node.js project:

 

npm init

This command will ask you a series of questions to configure your project. You can leave most of the defaults as-is, but make sure to set the "entry point" to the main file of your package. For this tutorial, we will use src/index.ts as our entry point.

Next, install TypeScript and its required dependencies by running:


npm install --save-dev typescript ts-node

Step 2: Write Your TypeScript Code

Create a new file named src/index.ts and write some code. For this tutorial, we will create a simple function that returns State name based on number.

 

export function returnStateByCode(code?: string) {
    return stateData.filter(item => item.code === code) ? stateData.filter(item => item.code === code)[0]?.state : undefined;
}

This function takes one argument, code, and returns their respective state name. Note that we have added the export keyword before the function declaration to make it visible outside of the module.

Step 3: Configure Your TypeScript Compiler

Create a new file named tsconfig.json in the root of your project directory with the following contents:


{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "declaration": true,
    "outDir": "dist"
  },
  "include": [
    "src/**/*"
  ]
}

This configuration tells TypeScript to compile our code to the dist directory, and to generate type declarations for our module. The include field specifies which files and directories should be included in the compilation.

Step 4: Build Your Package

Run the following command to compile your TypeScript code:

npx tsc

This will create a new directory named dist with your compiled JavaScript files and type declarations.

Step 5: Publish Your Package

Before you can publish your package to the NPM registry, you need to create an account on the NPM website if you haven't already done so, please visit  NPM signup page to create one.

Once you have an account,  open your terminal and run the following command to log in:

npm login

This will prompt you to enter your NPM username, password, and email address.

To check your username of account from which you are currently logged in , run the following command in your terminal .
 

npm whoami

Finally, run the following command to publish your package:

If you are publishing your npm package for first time , run the following command  :

npm publish --access public

For updating the vesion , just run the following command in your terminal :

npm publish

After running the command, something like this will run on your terminal 
 

npm notice 
npm notice 📦  [email protected]
npm notice === Tarball Contents === 
npm notice 2.4kB   README.md
npm notice 201B    dist/__tests__/test.js    
npm notice 174B    dist/__tests__/test.js.map
npm notice 377.1kB dist/gst-slab.json        
npm notice 3.6MB   dist/hsn.json
npm notice 2.4kB   dist/index.js
npm notice 1.6kB   dist/index.js.map
npm notice 65.4kB  dist/sac.json
npm notice 2.4kB   dist/state.json
npm notice 522B    package.json
npm notice 365.5kB src/gst-slab.json
npm notice 3.6MB   src/hsn.json
npm notice 1.2kB   src/index.ts
npm notice 56.9kB  src/sac.json
npm notice 2.5kB   src/state.json
npm notice 842B    tsconfig.json
npm notice === Tarball Details ===
npm notice name:          [email protected]
npm notice version:       1.0.0
npm notice filename:      [email protected]
npm notice package size:  640.4 kB
npm notice unpacked size: 8.1 MB
npm notice shasum:        5a93d7f4d6ce8048e67e26bfc405215ffcc5f6f3
npm notice integrity:     sha512-ichnFcLpjYyYX[...]9hr8VFmC9mHwA==
npm notice total files:   16
npm notice

 

Congratulations! You have successfully created and published your first NPM package in TypeScript. Other developers can now install your package and use your code in their own projects.

Note: Make sure to update the version

Shape

Drop your comment

Blogs

Related blogs