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

1. Inicializar un repositorio Git:

   git init

1. Crear un archivo .gitignore para excluir node_modules:

   echo "node_modules" > .gitignore

1. Inicializar un nuevo proyecto de Node.js:

   npm init -y

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

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

1. Verificar la configuración de commitlint:

   npx commitlint --from HEAD~1 --to HEAD --verbose

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

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

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

   mkdir .github
   mkdir .github/workflows/
   touch .github/workflows/release.yml

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.