DEV Community

hijuliancode
hijuliancode

Posted on

1

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!

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up