Hoe TypeScript te gebruiken in een Monorepo-opstelling

Met een monorepo-opstelling kunt u meerdere pakketten of projecten in één repository beheren. Met TypeScript is deze opstelling vooral krachtig voor het delen van typen, interfaces en zelfs hulpprogramma's tussen verschillende pakketten. Deze gids leidt u door het instellen van TypeScript in een monorepo-omgeving.

1. De Monorepo instellen

Om een ​​monorepo op te zetten, kunt u tools gebruiken zoals npm workspaces of yarn workspaces. Met deze tools kunt u meerdere pakketten in dezelfde repository beheren en is het eenvoudig om code te delen tussen projecten.

1.1 Initialiseren van een Monorepo

Maak eerst een nieuwe map voor uw monorepo en initialiseer deze met npm of yarn.

mkdir my-monorepo
cd my-monorepo
npm init -y

Configureer vervolgens werkruimten in uw package.json:

{
  "name": "my-monorepo",
  "version": "1.0.0",
  "private": true,
  "workspaces": [
    "packages/*"
  ]
}

Met deze instelling weet npm of yarn dat alle pakketten in de map packages worden geplaatst.

2. Pakketten toevoegen aan de Monorepo

Maak twee pakketten in je monorepo. Voor dit voorbeeld maken we een shared-pakket voor herbruikbare code en een web-app-pakket voor een frontend-applicatie.

mkdir -p packages/shared
mkdir -p packages/web-app

Initialiseer in elk pakket een package.json:

cd packages/shared
npm init -y

cd ../web-app
npm init -y

3. TypeScript toevoegen aan de Monorepo

Vervolgens gaan we TypeScript instellen. Installeer TypeScript en de benodigde afhankelijkheden in de root van je monorepo:

npm install typescript --save-dev

Maak een root-level tsconfig.json om de TypeScript-configuratie voor de gehele monorepo te definiëren:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "*": ["packages/*/src"]
    },
    "composite": true,
    "declaration": true,
    "outDir": "dist",
    "rootDir": ".",
    "skipLibCheck": true,
    "module": "ESNext",
    "target": "ES6",
    "moduleResolution": "node"
  },
  "include": ["packages/*"]
}

De sleutel hier is de optie paths, waarmee TypeScript imports van verschillende pakketten in de monorepo kan begrijpen.

4. TypeScript configureren in elk pakket

Elk pakket heeft zijn eigen tsconfig.json nodig om goed te werken in de monorepo. Hier is een voorbeeldconfiguratie voor het shared-pakket:

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "rootDir": "src",
    "outDir": "dist"
  },
  "include": ["src"]
}

En voor het web-app-pakket:

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "rootDir": "src",
    "outDir": "dist"
  },
  "include": ["src"]
}

Nu kan TypeScript in elk pakket worden gebruikt en worden de configuraties gedeeld vanuit de root tsconfig.json.

5. TypeScript-code toevoegen aan de pakketten

Laten we wat voorbeeld-TypeScript-code toevoegen aan beide pakketten. Maak in het pakket shared een map src en voeg een TypeScript-bestand toe:

mkdir -p packages/shared/src
touch packages/shared/src/index.ts

Exporteer een eenvoudige functie in index.ts:

export const greet = (name: string): string => {
  return `Hello, ${name}!`;
}

Maak in het pakket web-app een map src en een bestand index.ts:

mkdir -p packages/web-app/src
touch packages/web-app/src/index.ts

Importeer nu de gedeelde functie:

import { greet } from 'shared';

console.log(greet('TypeScript Monorepo'));

6. De Monorepo bouwen

Om alle TypeScript-code in de monorepo te compileren, moeten we de TypeScript-compiler gebruiken. Voer in de root van de monorepo het volgende uit:

npx tsc --build

Met deze opdracht worden alle pakketten gecompileerd door hun respectievelijke tsconfig.json-bestanden te volgen.

Conclusie

In deze gids hebben we besproken hoe u TypeScript in een monorepo kunt instellen en gebruiken. Door uw code in een monorepo-structuur te organiseren, kunt u code eenvoudig delen over meerdere pakketten, waardoor uw ontwikkelingsproces efficiënter wordt. Met de sterke typering en projectreferenties van TypeScript is deze opstelling perfect voor grootschalige toepassingen of gedeelde bibliotheken.