Bibliotecas compartidas y paquetes internos
Cree bibliotecas compartidas de UI y utilidades e impórtelas entre aplicaciones mediante aliases de rutas de TypeScript.
Bibliotecas compartidas y paquetes internos es una lección gratuita de React Academy en CoddyKit. Esta es la lección 2 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 React Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de React Academy incluye 4 lecciones en total.
¿Por qué usar bibliotecas compartidas?
En lugar de duplicar componentes, hooks y utilidades en varias aplicaciones, extráigalos a proyectos de bibliotecas compartidas que pueda consumir cualquier aplicación del monorepo.
Generación de una biblioteca
Use los generadores de Nx para crear proyectos de bibliotecas tipadas y compilables.
# UI component library:
npx nx generate @nx/react:library ui --directory=libs/ui --importPath=@myorg/ui
# Utility library:
npx nx generate @nx/js:library utils --directory=libs/utils --importPath=@myorg/utils
# Data access library (hooks, API calls):
npx nx generate @nx/react:library data-access --importPath=@myorg/data-accessAPI pública de la biblioteca
Exporte todo desde un único index.ts (la API pública). Los consumidores solo deben importar desde @myorg/ui, no desde rutas internas profundas.
// libs/ui/src/index.ts
export { Button } from './lib/Button';
export { Card } from './lib/Card';
export { Input } from './lib/Input';
export type { ButtonProps } from './lib/Button';
// Consumer in apps/web:
import { Button, Card } from '@myorg/ui';
// NOT: import { Button } from '@myorg/ui/src/lib/Button'; // internal pathTipos de bibliotecas: compilables frente a publicables
Las bibliotecas compilables se compilan de forma incremental para acelerar las compilaciones del monorepo. Las bibliotecas publicables también generan un paquete compatible con npm para su consumo externo.
# Buildable (monorepo internal use only):
npx nx generate @nx/react:library ui --buildable
# Publishable (for npm too):
npx nx generate @nx/react:library ui --publishable --importPath=@myorg/uiAplicación de límites entre módulos
Use la regla de ESLint @nx/enforce-module-boundaries para impedir dependencias circulares y restringir qué proyectos pueden importarse entre sí.
// nx.json or .eslintrc
"depConstraints": [
// Apps can only import from libs:
{ "sourceTag": "type:app", "onlyDependOnLibsWithTags": ["type:lib"] },
// Feature libs can't import other feature libs (via shared libs only):
{ "sourceTag": "type:feature", "notDependOnLibsWithTags": ["type:feature"] }
]Storybook para bibliotecas compartidas
Ejecute Storybook con la biblioteca de UI para documentar los componentes de forma aislada, independientemente de cualquier aplicación.
# Generate Storybook config for the ui lib:
npx nx generate @nx/storybook:configuration ui
# Run Storybook:
npx nx storybook uiPruebas de bibliotecas
Cada biblioteca tiene su propio destino de pruebas. Ejecute las pruebas de la biblioteca y de todas las aplicaciones afectadas cuando la biblioteca cambie.
# Test specific library:
npx nx test ui
# Test all affected by a change:
npx nx affected --target=testGestión de versiones en monorepos
En un monorepo, todos los paquetes comparten un único package.json y una misma versión. Para las bibliotecas publicables, use herramientas como @jscutlery/semver o Changesets para gestionar versiones independientes.
Migración de código existente a bibliotecas
Mueva gradualmente el código compartido a una biblioteca: cree la biblioteca, mueva los archivos, actualice las importaciones y deje que los alias de rutas de TypeScript se encarguen del resto.
# Move a component:
# 1. Copy src/components/Button.tsx → libs/ui/src/lib/Button.tsx
# 2. Export from libs/ui/src/index.ts
# 3. Update imports across apps from relative paths to '@myorg/ui'
# 4. Delete the original fileDocumentación con Compodoc o Storybook Docs
Use la etiqueta autodocs de Storybook o Compodoc para generar documentación de la API a partir de los tipos de TypeScript y los comentarios JSDoc de los archivos de la biblioteca.
Comprobación rápida
¿Cuál debe ser el único punto de entrada para los consumidores que importan desde una biblioteca compartida de Nx?
Repaso
Genere bibliotecas con nx generate, exporte todo desde un único index.ts y aplique límites entre módulos mediante reglas de ESLint. Use bibliotecas compilables para acelerar las compilaciones incrementales y bibliotecas publicables cuando necesite publicarlas en npm. Ejecute Storybook con las bibliotecas de UI para obtener documentación aislada.
Preguntas frecuentes
¿La lección «Bibliotecas compartidas y paquetes internos» es gratis?
Sí — el texto completo de «Bibliotecas compartidas y paquetes internos» 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 React Academy, actualiza a CoddyKit PRO. El curso de React Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Bibliotecas compartidas y paquetes internos»?
Cree bibliotecas compartidas de UI y utilidades e impórtelas entre aplicaciones mediante aliases de rutas de TypeScript. Practicas React 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 React Academy?
No se requiere experiencia previa. React 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 2 de 4.
¿Cuánto tiempo toma la lección «Bibliotecas compartidas y paquetes internos»?
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 React Academy?
Sí. Cada lección de React 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
- Crear un monorepo Nx con aplicaciones React
- Bibliotecas compartidas y paquetes internos
- Comandos Affected y caché de Nx
- Generadores de código y automatización del workspace