Publicación en npm y versionado semántico
Campos de package.json (main, module, exports), registros de cambios, semantic-release y proceso de npm publish
Publicación en npm y versionado semántico es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 4 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 Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 4 lecciones en total.
Prepararse para publicar
La publicación permite instalar su biblioteca mediante npm install. Antes de hacerlo, package.json debe declarar correctamente los puntos de entrada y usted debe controlar qué archivos se publican.
main y module
main apunta a la compilación CommonJS para las herramientas antiguas; module apunta a la compilación ESM para que los bundlers modernos elijan la versión compatible con tree-shaking.
{
"main": "./dist/my-ui-lib.cjs.js",
"module": "./dist/my-ui-lib.es.js"
}El mapa exports
El campo moderno exports define puntos de entrada condicionales. Tiene prioridad sobre main/module y controla el acceso a las subrutas.
{
"exports": {
".": {
"types": "./dist/index.d.ts",
"import": "./dist/my-ui-lib.es.js",
"require": "./dist/my-ui-lib.cjs.js"
},
"./style.css": "./dist/style.css"
}
}Exportaciones condicionales
Las condiciones import, require y types permiten que Node y los bundlers resuelvan el archivo correcto para ESM, CommonJS y TypeScript, respectivamente.
Controlar los archivos publicados
Utilice el campo files para crear una lista de archivos permitidos, o un archivo .npmignore para crear una lista de archivos bloqueados. Publicar dist y excluir el código fuente y las pruebas mantiene pequeño el paquete.
{
"files": ["dist"]
}.npmignore
Si prefiere una lista de archivos bloqueados, .npmignore excluye archivos incluso cuando no se ha establecido el campo files. Sin ninguno de los dos, npm publica prácticamente todo.
# .npmignore
src
tests
vite.config.ts
*.logVista previa con npm pack
Ejecute npm pack para crear un tarball e inspeccionar exactamente qué se publicaría: una comprobación de seguridad fundamental antes de poner el paquete a disposición de los usuarios.
npm pack
# inspect the listed files; nothing secret should appearVersionado semántico
SemVer utiliza MAJOR.MINOR.PATCH. Incremente patch para correcciones de errores compatibles con versiones anteriores, minor para funcionalidades compatibles con versiones anteriores y major para cambios incompatibles.
Comandos npm version
El comando npm version incrementa la versión en package.json y crea una etiqueta de git en un solo paso.
npm version patch # 1.0.0 -> 1.0.1
npm version minor # 1.0.1 -> 1.1.0
npm version major # 1.1.0 -> 2.0.0npm publish
npm publish publica el paquete. Los paquetes públicos con ámbito necesitan la opción --access public la primera vez.
npm publish --access publicprepublishOnly y dist-tag
Un script prepublishOnly garantiza que se ejecute una compilación actualizada antes de publicar, y --tag next publica versiones preliminares sin mover la etiqueta latest.
{
"scripts": {
"prepublishOnly": "npm run build"
}
}
// npm publish --tag nextComprobación rápida
Añade una nueva prop opcional sin romper el uso existente. ¿Qué incremento de versión corresponde?
Resumen
Configure main, module y un mapa exports condicional (import/require/types), y controle los archivos publicados con files o .npmignore. Obtenga una vista previa con npm pack, incremente las versiones según SemVer mediante npm version patch/minor/major y publique con npm publish (añadiendo --access public para los paquetes con ámbito).
Preguntas frecuentes
¿La lección «Publicación en npm y versionado semántico» es gratis?
Sí — el texto completo de «Publicación en npm y versionado semántico» 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 Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Publicación en npm y versionado semántico»?
Campos de package.json (main, module, exports), registros de cambios, semantic-release y proceso de npm publish Practicas Vue 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 Vue Academy?
No se requiere experiencia previa. Vue 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 4 de 4.
¿Cuánto tiempo toma la lección «Publicación en npm y versionado semántico»?
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 Vue Academy?
Sí. Cada lección de Vue 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
- Configuración del modo biblioteca de Vite
- Declaraciones de TypeScript para bibliotecas de componentes
- Tree-shaking e importación automática
- Publicación en npm y versionado semántico