Hur man använder TypeScript i en Monorepo-installation

En monorepo-inställning låter dig hantera flera paket eller projekt i ett enda arkiv. Med TypeScript är den här installationen särskilt kraftfull för att dela typer, gränssnitt och till och med verktyg mellan olika paket. Den här guiden går igenom hur du ställer in TypeScript i en monorepo-miljö.

1. Installera Monorepo

För att ställa in en monorepo kan du använda verktyg som npm arbetsytor eller yarn arbetsytor. Dessa verktyg låter dig hantera flera paket i samma arkiv och gör det enkelt att dela kod mellan projekt.

1.1 Initiera en Monorepo

Skapa först en ny mapp för din monorepo och initiera den med npm eller yarn.

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

Konfigurera sedan arbetsytor i ditt package.json:

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

Denna inställning talar om för npm eller garn att alla paket kommer att finnas i mappen packages.

2. Lägga till paket till Monorepo

Skapa två paket i din monorepo. För det här exemplet skapar vi ett delat-paket för återanvändbar kod och ett web-app-paket för en frontend-applikation.

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

Initiera ett package.json: inuti varje paket.

cd packages/shared
npm init -y

cd ../web-app
npm init -y

3. Lägger till TypeScript till Monorepo

Därefter ställer vi in ​​TypeScript. Installera TypeScript och nödvändiga beroenden i roten av din monorepo:

npm install typescript --save-dev

Skapa en rotnivå tsconfig.json för att definiera TypeScript-konfigurationen för hela monorepo:

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

Nyckeln här är alternativet paths, vilket gör att TypeScript kan förstå importer från olika paket i monorepo.

4. Konfigurera TypeScript i varje paket

Varje paket behöver sin egen tsconfig.json för att fungera korrekt i monorepo. Här är ett exempel på en konfiguration för shared-paketet:

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

Och för web-app-paketet:

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

Nu kan TypeScript användas i varje paket, och konfigurationerna delas från roten tsconfig.json.

5. Lägger till TypeScript-kod till paketen

Låt oss lägga till exempel på TypeScript-kod till båda paketen. I paketet shared, skapa en src-mapp och lägg till en TypeScript-fil:

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

I index.ts, exportera en enkel funktion:

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

I web-app-paketet skapar du en src-mapp och en index.ts-fil:

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

Importera nu den delade funktionen:

import { greet } from 'shared';

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

6. Bygger Monorepo

För att kompilera all TypeScript-kod i monorepo måste vi använda TypeScript-kompilatorn. Vid roten av monorepo, kör:

npx tsc --build

Detta kommando kommer att kompilera alla paket genom att följa deras respektive tsconfig.json-filer.

Slutsats

I den här guiden behandlade vi hur man ställer in och använder TypeScript i en monorepo. Genom att organisera din kod i en monorepo-struktur kan du enkelt dela kod över flera paket, vilket gör din utvecklingsprocess mer effektiv. Med TypeScripts starka typ- och projektreferenser är den här installationen perfekt för storskaliga applikationer eller delade bibliotek.