Come usare TypeScript in una configurazione Monorepo
Una configurazione monorepo consente di gestire più pacchetti o progetti in un singolo repository. Con TypeScript, questa configurazione è particolarmente potente per condividere tipi, interfacce e persino utility tra diversi pacchetti. Questa guida ti guiderà attraverso la configurazione di TypeScript in un ambiente monorepo.
1. Impostazione del Monorepo
Per impostare un monorepo, puoi usare strumenti come npm
workspaces o yarn
workspaces. Questi strumenti ti permettono di gestire più pacchetti nello stesso repository e semplificano la condivisione del codice tra progetti.
1.1 Inizializzazione di un Monorepo
Per prima cosa, crea una nuova cartella per il tuo monorepo e inizializzala con npm
o yarn
.
mkdir my-monorepo
cd my-monorepo
npm init -y
Quindi, configura gli spazi di lavoro nel tuo package.json
:
{
"name": "my-monorepo",
"version": "1.0.0",
"private": true,
"workspaces": [
"packages/*"
]
}
Questa configurazione indica a npm o yarn che tutti i pacchetti saranno salvati nella cartella packages
.
2. Aggiunta di pacchetti al Monorepo
Crea due pacchetti nel tuo monorepo. Per questo esempio, creeremo un pacchetto shared
per il codice riutilizzabile e un pacchetto web-app
per un'applicazione frontend.
mkdir -p packages/shared
mkdir -p packages/web-app
All'interno di ogni pacchetto, inizializza un package.json
:
cd packages/shared
npm init -y
cd ../web-app
npm init -y
3. Aggiungere TypeScript al Monorepo
Successivamente, imposteremo TypeScript. Installa TypeScript e le dipendenze necessarie alla radice del tuo monorepo:
npm install typescript --save-dev
Creare un file tsconfig.json
a livello di radice per definire la configurazione TypeScript per l'intero monorepo:
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"*": ["packages/*/src"]
},
"composite": true,
"declaration": true,
"outDir": "dist",
"rootDir": ".",
"skipLibCheck": true,
"module": "ESNext",
"target": "ES6",
"moduleResolution": "node"
},
"include": ["packages/*"]
}
La chiave qui è l'opzione paths
, che consente a TypeScript di comprendere le importazioni da diversi pacchetti nel monorepo.
4. Configurazione di TypeScript in ogni pacchetto
Ogni pacchetto ha bisogno del proprio tsconfig.json
per funzionare correttamente nel monorepo. Ecco un esempio di configurazione per il pacchetto shared
:
{
"extends": "../../tsconfig.json",
"compilerOptions": {
"rootDir": "src",
"outDir": "dist"
},
"include": ["src"]
}
E per il pacchetto web-app
:
{
"extends": "../../tsconfig.json",
"compilerOptions": {
"rootDir": "src",
"outDir": "dist"
},
"include": ["src"]
}
Ora TypeScript può essere utilizzato in ogni pacchetto e le configurazioni vengono condivise dalla radice tsconfig.json
.
5. Aggiunta di codice TypeScript ai pacchetti
Aggiungiamo un po' di codice TypeScript di esempio a entrambi i pacchetti. Nel pacchetto shared
, crea una cartella src
e aggiungi un file TypeScript:
mkdir -p packages/shared/src
touch packages/shared/src/index.ts
In index.ts
, esporta una semplice funzione:
export const greet = (name: string): string => {
return `Hello, ${name}!`;
}
Nel pacchetto web-app
, crea una cartella src
e un file index.ts
:
mkdir -p packages/web-app/src
touch packages/web-app/src/index.ts
Ora, importiamo la funzione condivisa:
import { greet } from 'shared';
console.log(greet('TypeScript Monorepo'));
6. Costruire il Monorepo
Per compilare tutto il codice TypeScript nel monorepo, dobbiamo usare il compilatore TypeScript. Alla radice del monorepo, esegui:
npx tsc --build
Questo comando compilerà tutti i pacchetti seguendo i rispettivi file tsconfig.json
.
Conclusione
In questa guida, abbiamo spiegato come impostare e usare TypeScript in un monorepo. Organizzando il tuo codice in una struttura monorepo, puoi facilmente condividere il codice tra più pacchetti, rendendo il tuo processo di sviluppo più efficiente. Con la tipizzazione forte e i riferimenti di progetto di TypeScript, questa configurazione è perfetta per applicazioni su larga scala o librerie condivise.