DEV Community

hijuliancode
hijuliancode

Posted on • Edited on

Crear un Paquete de NPM - Paso a Paso / TypeScript, commit linting, Husky, Semantic Release

¡Hola, comunidad!

Hoy traigo una guía para configurar un paquete de JavaScript/NPM desde cero, incluyendo la configuración de commit linting, Husky y semantic release para un proceso de desarrollo y publicación más fluido. ¡Vamos a ello!

Demo

  1. Crear un nuevo directorio para el proyecto:
   mkdir nuevo-proyecto
   cd nuevo-proyecto
Enter fullscreen mode Exit fullscreen mode
  1. Inicializar un repositorio Git:
   git init
Enter fullscreen mode Exit fullscreen mode
  1. Crear un archivo .gitignore para excluir node_modules:
   echo "node_modules" > .gitignore
Enter fullscreen mode Exit fullscreen mode
  1. Inicializar un nuevo proyecto de Node.js:
   npm init -y
Enter fullscreen mode Exit fullscreen mode

Asegúrate de agregar "type": "module" en tu package.json para habilitar módulos ES6.

  1. Configurar commitlint para imponer mensajes de commits consistentes:
   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. Configurar husky para garantizar que los commits sigan las reglas de commitlint:
   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. Verificar la configuración de commitlint:
   npx commitlint --from HEAD~1 --to HEAD --verbose
Enter fullscreen mode Exit fullscreen mode
  1. Hacer algunos commits de prueba para verificar la configuración:
   git add .
   git commit -m "foo: este commit fallará" # Este commit debería fallar
   git commit -m "chore: este commit pasará" # Este commit debería pasar
Enter fullscreen mode Exit fullscreen mode
  1. Instalar y configurar semantic-release para versionado y publicaciones automáticas:
   npm install --save-dev semantic-release
   npm install @semantic-release/git @semantic-release/changelog -D
Enter fullscreen mode Exit fullscreen mode

Crear los directorios y el archivo necesarios para semantic-release:

   mkdir .github
   mkdir .github/workflows/
   touch .github/workflows/release.yml
Enter fullscreen mode Exit fullscreen mode
  1. Taguear el último commit y subirlo al repositorio:

    git log # Copiar el GUID del último commit
    git tag v0.0.0 <COMMIT_GUID>
    git tag --contains <COMMIT_GUID>
    git push origin tag v0.0.0
    
  2. Crear un nuevo token de NPM y agregarlo a los secretos de tu repositorio.

  3. Instalar y configurar Commitizen para mensajes de commit consistentes:

    npm install commitizen -g
    commitizen init cz-conventional-changelog --save-dev --save-exact
    
  4. Instalar herramientas adicionales de desarrollo como TypeScript, Jest y 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
    

    Crear el archivo de configuración de Rollup (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',
        },
      }
    ];
    

¡Y eso es todo! Ahora tienes un proyecto completamente configurado y listo para desarrollar y publicar tu librería JavaScript. Si tienes alguna pregunta o necesitas más ayuda, no dudes en preguntar. ¡Feliz codificación! 🚀

Saludos.

Pendiente:
[] Explicar creacion de tokens e instalacion en githun
[] Actualizacion de package.json con husky y demas

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more