Maison > interface Web > js tutoriel > le corps du texte

Créer un package NPM – étape par étape

DDD
Libérer: 2024-09-13 12:31:02
original
959 Les gens l'ont consulté

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
Copier après la connexion
  1. Initialize a Git repository:
   git init
Copier après la connexion
  1. Create a .gitignore file to exclude node_modules:
   echo "node_modules" > .gitignore
Copier après la connexion
  1. Initialize a new Node.js project:
   npm init -y
Copier après la connexion

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
Copier après la connexion
  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
Copier après la connexion
  1. Verify commitlint configuration:
   npx commitlint --from HEAD~1 --to HEAD --verbose
Copier après la connexion
  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
Copier après la connexion
  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
Copier après la connexion

Create the necessary directories and file for semantic-release:

   mkdir .github
   mkdir .github/workflows/
   touch .github/workflows/release.yml
Copier après la connexion
  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
    
    Copier après la connexion
  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
    
    Copier après la connexion
  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
    
    Copier après la connexion

    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',
        },
      }
    ];
    
    Copier après la connexion

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!

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:dev.to
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!