NPM 패키지 생성 - 단계별

DDD
풀어 주다: 2024-09-13 12:31:02
원래의
956명이 탐색했습니다.

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!

위 내용은 NPM 패키지 생성 - 단계별의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!