Create a NPM Package - Step by Step

Hello, developer community!

Today, I’m going to walk you through the steps to set up a JavaScript library from scratch, including configuring commit linting, Husky, and semantic release for smooth development and release processes. Let’s dive into it!

Demo

1. Create a new project directory:

   mkdir new-project
   cd new-project

1. Initialize a Git repository:

   git init

1. Create a .gitignore file to exclude node_modules:

   echo "node_modules" > .gitignore

1. Initialize a new Node.js project:

   npm init -y

Make sure to add "type": "module" to your package.json to enable ES6 modules.

1. Set up commitlint to enforce consistent commit messages:

   npm install --save-dev @commitlint/{cli,config-conventional}
   echo "export default { extends: ['@commitlint/config-conventional'] };" > commitlint.config.js

1. Configure husky to ensure commits follow commitlint rules:

   npm install --save-dev husky
   npx husky init
   rm .husky/pre-commit
   echo "npx --no -- commitlint --edit \$1" > .husky/commit-msg

1. Verify commitlint configuration:

   npx commitlint --from HEAD~1 --to HEAD --verbose

1. Perform some test commits to check the configuration:

   git add .
   git commit -m "foo: this will fail" # This commit should fail
   git commit -m "chore: this will pass" # This commit should pass

1. Install and configure semantic-release for automated versioning and releases:

   npm install --save-dev semantic-release
   npm install @semantic-release/git @semantic-release/changelog -D

Create the necessary directories and file for semantic-release:

   mkdir .github
   mkdir .github/workflows/
   touch .github/workflows/release.yml

1. Tag the latest commit and push it to the repository:
   

   git log # Copy the GUID of the latest commit
   git tag v0.0.0 <COMMIT_GUID>
   git tag --contains <COMMIT_GUID>
   git push origin tag v0.0.0
   

2. Create a new NPM token and add it to your repository secrets.

3. Install and configure Commitizen for consistent commit messages:
   

   npm install commitizen -g
   commitizen init cz-conventional-changelog --save-dev --save-exact
   

4. Install additional development tools like TypeScript, Jest, and Rollup:
   

   npm install --save-dev typescript @types/node jest ts-jest @types/jest
   npm install --save-dev rollup @rollup/plugin-typescript @rollup/plugin-terser
   npm install --save-dev rollup-plugin-dts
   

   Create the Rollup configuration file (rollup.config.js):
   

   import terser from '@rollup/plugin-terser';
   import typescript from '@rollup/plugin-typescript';
   import dts from 'rollup-plugin-dts';
   
   export default [
     {
       input: 'src/index.ts',
       plugins: [
         typescript({ 
           tsconfig: './tsconfig.json',
           declaration: false,
           declarationDir: null,
         }),
         terser()
       ],
       output: [
         {
           file: 'dist/index.mjs',
           format: 'esm',
         },
         {
           file: 'dist/index.cjs',
           format: 'cjs',
           exports: 'named',
         },
       ]
     },
     {
       input: 'src/index.ts',
       plugins: [dts()],
       output: {
         file: 'dist/index.d.ts',
         format: 'es',
       },
     }
   ];
   

And that’s it! You now have a fully configured project ready for developing and publishing your JavaScript library. If you have any questions or need further assistance, feel free to ask. Happy coding! ?

Best regards!

The above is the detailed content of Create a NPM Package - Step by Step. For more information, please follow other related articles on the PHP Chinese website!