Steps to build NPM Package:-
Step 1: Open the GitHub account and create new empty repository and give the name stringToLower then click on create repository button.
Step 2:- Then go to the code editor(VS Code) and Open the terminal and create new empty folder and then open it.
mkdir stringToLower
Step 3: Open this folder terminal and initialize the git repository
git init
git remote add origin https://github.com/YourRepo.git
git remote -v
Step 4:-Go to code editor, create README.md file in the folder and open terminal and check the status of the git repository
git status
Step 5:- write something your Readme file and push into the GitHub repository by using the following command.
git add .
git commit -m 'Initial'
git push -u origin master
Step 6:- initialize the project using this command :- npm init -y and then go to package.json file and give the keywords and the author name and change licencse type ISC to MIT.
Step 7:- Create a file .gitignore and add node_modules in it.
Step 8: Install typescript using the following command and Create a folder src and inside it create a file index.ts
npm install -D typescript
Step 9:- For the configuration of TypeScript create a file tsconfig.json. then give some congiguration code like this:
Javascript
{ "compilerOptions" : { "target" : "ES5" , "module" : "CommonJS" , "declaration" : true , "outDir" : "./lib" , "strict" : true }, "include" : [ "src" ], "exclude" : [ "node_modules" , "**/__tests__/*" ] } |
Step 10:- Add the following code in src/index.ts file
Javascript
//src/index.ts export class StringtoLowercase{ static ToLower(stringName:string) { let lower = "" ; for ( var i = 0; i < stringName.length; i++) { var value = stringName.charCodeAt(i); if (value >= 65 && value <= 90) { lower += String.fromCharCode(value + 32); } else { lower += stringName[i]; } } console.log(lower); } } |
Step 11:- Modify the package.json file.
1. In script object change the “test” to “build” and give the value “tsc”.
2. Save the file and build the project with the following command:
npm run build
3. It will create a lib folder and inside the lib folder two file like index.d.ts and index.js will be created.
4. Go to .gitignore file and add lib folder which which will not be pushed to GitHub repository.
5. Go to package.json file and add the file object.
6. Update the entry point of file and types.
7. Check the git status (using this command: “git status”) and push this code in GitHub repository by following the step5.
Steps to Publish NPM Package:-
Step 1:- Create the NPM account and go to profile and click on package button(If there is any package it will show otherwise no package found message will show )
Step 2:- Then go to vs code terminal and login with npm using the following command.
npm login
Step 3: Check that you are login successfully or not using the following command.
npm whoami
Step 4: In the terminal, write the command to publish your npm package
npm publish
Step 5: Go to npm.com and go to packages you will find your published package.
How to build and publish an NPM package for React using Typescript?
In development, creating and distributing reusable components is essential for building scalable and maintainable applications. With the popularity of TypeScript and React, you can easily package and share your components as NPM packages. This tutorial will teach us how to create and release our NPM packages (NPM modules).