Sådan bruges TypeScript i en Monorepo-opsætning

En monorepo-opsætning giver dig mulighed for at administrere flere pakker eller projekter i et enkelt lager. Med TypeScript er denne opsætning særligt kraftfuld til deling af typer, grænseflader og endda hjælpeprogrammer på tværs af forskellige pakker. Denne guide vil guide dig gennem, hvordan du opsætter TypeScript i et monorepo-miljø.

1. Opsætning af Monorepo

For at oprette en monorepo kan du bruge værktøjer som npm arbejdsområder eller garn arbejdsområder. Disse værktøjer giver dig mulighed for at administrere flere pakker i det samme lager og gør det nemt at dele kode på tværs af projekter.

1.1 Initialisering af en Monorepo

Først skal du oprette en ny mappe til din monorepo og initialisere den med npm eller yarn.

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

Konfigurer derefter arbejdsområder i din package.json:

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

Denne opsætning fortæller npm eller garn, at alle pakkerne vil leve i mappen packages.

2. Tilføjelse af pakker til Monorepo

Opret to pakker i din monorepo. I dette eksempel opretter vi en delt-pakke til genbrugelig kode og en web-app-pakke til en frontend-applikation.

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

Initialér en package.json: inde i hver pakke

cd packages/shared
npm init -y

cd ../web-app
npm init -y

3. Tilføjelse af TypeScript til Monorepo

Dernæst sætter vi TypeScript op. Installer TypeScript og de nødvendige afhængigheder i roden af ​​din monorepo:

npm install typescript --save-dev

Opret et rodniveau tsconfig.json for at definere TypeScript-konfigurationen for hele monorepoen:

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

Nøglen her er paths muligheden, som tillader TypeScript at forstå importer fra forskellige pakker i monorepoen.

4. Konfiguration af TypeScript i hver pakke

Hver pakke har brug for sin egen tsconfig.json for at fungere korrekt i monorepoen. Her er et eksempel på konfiguration for shared-pakken:

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

Og for web-app-pakken:

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

Nu kan TypeScript bruges i hver pakke, og konfigurationerne deles fra roden tsconfig.json.

5. Tilføjelse af TypeScript-kode til pakkerne

Lad os tilføje et eksempel på TypeScript-kode til begge pakker. I shared-pakken skal du oprette en src-mappe og tilføje en TypeScript-fil:

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

I index.ts, eksporter en simpel funktion:

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

I web-app-pakken skal du oprette en src-mappe og en index.ts-fil:

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

Importer nu den delte funktion:

import { greet } from 'shared';

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

6. Opbygning af Monorepo

For at kompilere al TypeScript-kode i monorepoen skal vi bruge TypeScript-kompileren. Kør ved roden af ​​monorepoen:

npx tsc --build

Denne kommando vil kompilere alle pakkerne ved at følge deres respektive tsconfig.json filer.

Konklusion

I denne vejledning dækkede vi, hvordan man opsætter og bruger TypeScript i en monorepo. Ved at organisere din kode i en monorepo-struktur kan du nemt dele kode på tværs af flere pakker, hvilket gør din udviklingsproces mere effektiv. Med TypeScripts stærke skrive- og projektreferencer er denne opsætning perfekt til store applikationer eller delte biblioteker.