Librerie condivise e package interni
Crei librerie UI e utility condivise e le importi tra le app con gli alias dei path TypeScript.
Librerie condivise e package interni è una lezione React Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento React Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso React Academy include 4 lezioni in totale.
Perché utilizzare librerie condivise?
Invece di duplicare componenti, hook e utilità in più app, li estragga in progetti di librerie condivise utilizzabili da qualsiasi app del monorepo.
Generazione di una libreria
Utilizzi i generatori Nx per creare progetti di librerie tipizzati e compilabili.
# 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 pubblica della libreria
Esporti tutto da un unico index.ts (l'API pubblica). I consumer dovrebbero importare solo da @myorg/ui, non da percorsi interni profondi.
// 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 pathTipi di libreria: publishable vs buildable
Le librerie Buildable vengono compilate in modo incrementale per velocizzare le build del monorepo. Le librerie Publishable generano inoltre un pacchetto compatibile con npm per l'utilizzo esterno.
# 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/uiApplicazione dei confini tra moduli
Utilizzi la regola ESLint @nx/enforce-module-boundaries per impedire dipendenze circolari e limitare i progetti che possono importarsi a vicenda.
// 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 per le librerie condivise
Esegua Storybook sulla libreria UI per documentare i componenti in isolamento, indipendentemente da qualsiasi app.
# Generate Storybook config for the ui lib:
npx nx generate @nx/storybook:configuration ui
# Run Storybook:
npx nx storybook uiTest delle librerie
Ogni libreria dispone del proprio target di test. Esegua i test della libreria e di tutte le app interessate quando la libreria cambia.
# Test specific library:
npx nx test ui
# Test all affected by a change:
npx nx affected --target=testGestione delle versioni nei monorepo
In un monorepo, tutti i pacchetti condividono un unico package.json e la stessa versione. Per le librerie publishable, utilizzi strumenti come @jscutlery/semver o Changesets per gestire il versionamento indipendente.
Migrazione del codice esistente nelle librerie
Sposti gradualmente il codice condiviso in una libreria: crei la libreria, sposti i file, aggiorni gli import e lasci che gli alias dei percorsi TypeScript gestiscano il 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 fileDocumentazione con Compodoc o Storybook Docs
Utilizzi il tag autodocs di Storybook o Compodoc per generare la documentazione dell'API dai tipi TypeScript e dai commenti JSDoc nei file della libreria.
Verifica rapida
Quale dovrebbe essere l'unico punto di ingresso per i consumer che importano da una libreria Nx condivisa?
Riepilogo
Generi le librerie con nx generate, esporti tutto da un unico index.ts e applichi i confini tra moduli con le regole ESLint. Utilizzi librerie buildable per velocizzare le build incrementali e librerie publishable quando deve pubblicare pacchetti su npm. Esegua Storybook sulle librerie UI per una documentazione isolata.
Impara React con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 88
- Lezioni
- 324
Domande Frequenti
La lezione «Librerie condivise e package interni» è gratuita?
Sì — il testo completo di «Librerie condivise e package interni» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso React Academy, passa a CoddyKit PRO. Il corso React Academy include 4 lezioni in totale.
Cosa imparerò in «Librerie condivise e package interni»?
Crei librerie UI e utility condivise e le importi tra le app con gli alias dei path TypeScript. Eserciti React Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare React Academy?
Non è richiesta alcuna esperienza precedente. React Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.
Quanto tempo richiede la lezione «Librerie condivise e package interni»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione React Academy?
Sì. Ogni lezione React Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Creazione di un monorepo Nx con app React
- Librerie condivise e package interni
- Comandi Nx Affected e caching
- Code generator e automazione del workspace