Versionado y publicación en npm
Use versionado semántico, automatice la generación del changelog con Changesets o standard-version y publique la biblioteca en npm o en un registro privado.
Versionado y publicación en npm es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.
Por qué publicar en npm
Si más de una aplicación utiliza su sistema de diseño, publíquelo como paquete. Los consumidores lo instalan con npm/yarn/pnpm, fijan las versiones y actualizan cuando lo consideran oportuno.
Versionado semántico (SemVer)
Las versiones siguen MAJOR.MINOR.PATCH. MAJOR: cambios incompatibles. MINOR: funcionalidades nuevas compatibles con versiones anteriores. PATCH: solo correcciones de errores.
Cuándo incrementar la versión
¿Ha cambiado el nombre de una prop? MAJOR. ¿Ha añadido una prop opcional? MINOR. ¿Ha corregido un error de CSS? PATCH. Las versiones anteriores a la 1.0 (0.x.y) pueden incluir cambios incompatibles en MINOR, pero sea considerado.
package.json — el manifiesto
Configure el aspecto que tendrá su paquete en npm.
{
"name": "@yourorg/design-system",
"version": "1.4.2",
"main": "dist/index.cjs.js",
"module": "dist/index.esm.js",
"types": "dist/index.d.ts",
"exports": {
".": { "import": "./dist/index.esm.js", "require": "./dist/index.cjs.js" },
"./theme": "./dist/theme.js"
},
"files": ["dist", "README.md"],
"peerDependencies": { "react": "^18.0.0" }
}Salida de compilación
Distribuya CommonJS, ESM y declaraciones de tipos. Herramientas como tsup o vite build --lib se encargan de ello.
// tsup.config.ts
export default {
entry: ['src/index.ts'],
format: ['cjs', 'esm'],
dts: true,
clean: true,
external: ['react', 'react-dom']
};
// package.json: "build": "tsup"peerDependencies
Declare React/Vue/etc. como peerDependencies para que los consumidores utilicen su propia versión. Si las marca como dependencias normales, se incluirán dos veces: hooks y context rotos.
Compatible con tree-shaking
Use exportaciones ESM y evite los efectos secundarios para que los empaquetadores puedan eliminar los componentes no utilizados. Indíquelo en package.json: "sideEffects": false (o enumere archivos concretos, como los CSS).
Publicar en npm
Inicie sesión una vez y después publique.
npm login
# Bump version + publish:
npm version patch # 1.4.2 -> 1.4.3
npm publish
# Or scoped public package:
npm publish --access publicAutomatizar publicaciones con Changesets
Changesets es el kit de herramientas moderno para publicar monorepos y bibliotecas. Las PR incluyen un archivo «changeset» que describe el cambio; la CI de publicación incrementa las versiones y publica.
npm install -D @changesets/cli
npx changeset init
# In each PR:
npx changeset
# pick package, type (major/minor/patch), describe change
# commits .changeset/<random>.md
# CI on main:
npx changeset version # bumps versions in package.json + generates changelog
npx changeset publish # publishes to npmChangelog automatizado
Changesets genera automáticamente un CHANGELOG.md por paquete a partir de las descripciones de los changesets; los consumidores pueden consultar qué cambió en cada versión.
Dist-tags de npm
Use dist-tags para las versiones preliminares: npm publish --tag beta publica sin sobrescribir latest. Los consumidores optan por ellas con npm install @yourorg/design-system@beta.
Registros privados
Los paquetes internos pueden usar GitHub Packages, GitLab Package Registry o Verdaccio autohospedado. Configure .npmrc: @yourorg:registry=https://npm.pkg.github.com.
Retirar versiones antiguas
Marque una versión como obsoleta para advertir a quienes la instalen.
npm deprecate @yourorg/design-system@1.0.0 'Use 2.x for React 18 support'Comprobación rápida
Si cambia el nombre de una prop de un componente exportado, ¿qué incremento de versión de SemVer necesita?
Repaso: versionado y publicación
SemVer: MAJOR.MINOR.PATCH: cambios incompatibles, funcionalidades y correcciones. Compile CJS + ESM + tipos (tsup, vite --lib). Use React/Vue como peerDependencies. sideEffects:false permite el tree-shaking. Publique con npm publish o automatice el proceso con Changesets. El CHANGELOG se genera automáticamente. Use dist-tags para versiones beta y registros privados para paquetes internos.
Aprende HTML con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 41
- Lecciones
- 163
Preguntas frecuentes
¿La lección «Versionado y publicación en npm» es gratis?
Sí — el texto completo de «Versionado y publicación en npm» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Versionado y publicación en npm»?
Use versionado semántico, automatice la generación del changelog con Changesets o standard-version y publique la biblioteca en npm o en un registro privado. Practicas Frontend Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Frontend Academy?
No se requiere experiencia previa. Frontend Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.
¿Cuánto tiempo toma la lección «Versionado y publicación en npm»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Frontend Academy?
Sí. Cada lección de Frontend Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Storybook: stories, controles y documentación
- Tokens de diseño con Style Dictionary
- Versionado y publicación en npm
- Consumo de un sistema de diseño