DEV Community

hijuliancode
hijuliancode

Posted on • Updated 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

Top comments (0)