DEV Community

hijuliancode
hijuliancode

Posted on

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

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)