DEV Community

hijuliancode
hijuliancode

Posted on

Create a NPM Package - Step by Step / TypeScript, commit linting, Husky, Semantic Release

#npm #package #typescript #javascript

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
Enter fullscreen mode Exit fullscreen mode
  1. Initialize a Git repository: 
 git init
Enter fullscreen mode Exit fullscreen mode
  1. Create a .gitignore file to exclude node_modules: 
 echo "node_modules" > .gitignore
Enter fullscreen mode Exit fullscreen mode
  1. Initialize a new Node.js project: 
 npm init -y
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
  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
Enter fullscreen mode Exit fullscreen mode
  1. Verify commitlint configuration: 
 npx commitlint --from HEAD~1 --to HEAD --verbose
Enter fullscreen mode Exit fullscreen mode
  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
Enter fullscreen mode Exit fullscreen mode
  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
Enter fullscreen mode Exit fullscreen mode

Create the necessary directories and file for semantic-release:

 mkdir .github mkdir .github/workflows/ touch .github/workflows/release.yml
Enter fullscreen mode Exit fullscreen mode

  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!

Top comments (0)