Як використовувати TypeScript у налаштуваннях Monorepo

Налаштування monorepo дозволяє вам керувати кількома пакетами або проектами в одному репозиторії. З TypeScript це налаштування особливо потужне для спільного використання типів, інтерфейсів і навіть утиліт у різних пакетах. Цей посібник допоможе вам налаштувати TypeScript у середовищі monorepo.

1. Налаштування Monorepo

Щоб налаштувати монорепо, ви можете використовувати такі інструменти, як npm робочі області або yarn робочі області. Ці інструменти дозволяють вам керувати декількома пакетами в одному репозиторії та спрощують обмін кодом між проектами.

1.1 Ініціалізація Monorepo

Спочатку створіть нову папку для свого monorepo та ініціалізуйте її npm або yarn.

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

Потім налаштуйте робочі області у вашому package.json:

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

Це налаштування повідомляє npm або yarn, що всі пакунки будуть зберігатися в папці packages.

2. Додавання пакетів до Monorepo

Створіть два пакети у своєму монорепо. Для цього прикладу ми створимо пакет shared для багаторазового коду та пакет web-app для зовнішньої програми.

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

У кожному пакеті ініціалізуйте package.json:

cd packages/shared
npm init -y

cd ../web-app
npm init -y

3. Додавання TypeScript до Monorepo

Далі ми налаштуємо TypeScript. Встановіть TypeScript і необхідні залежності в корені вашого monorepo:

npm install typescript --save-dev

Створіть кореневий файл tsconfig.json, щоб визначити конфігурацію TypeScript для всього монорепо:

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

Ключовим тут є параметр paths, який дозволяє TypeScript розуміти імпорт з різних пакунків у monorepo.

4. Налаштування TypeScript у кожному пакеті

Кожному пакету потрібен власний tsconfig.json для належної роботи в monorepo. Ось приклад конфігурації пакета shared:

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

А для пакета web-app:

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

Тепер TypeScript можна використовувати в кожному пакеті, а конфігурації надаються з кореневого каталогу tsconfig.json.

5. Додавання коду TypeScript до пакетів

Давайте додамо зразок коду TypeScript до обох пакетів. У пакеті shared створіть папку src і додайте файл TypeScript:

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

У index.ts експортуйте просту функцію:

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

У пакеті web-app створіть папку src і файл index.ts:

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

Тепер імпортуйте спільну функцію:

import { greet } from 'shared';

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

6. Будівництво Monorepo

Щоб скомпілювати весь код TypeScript у monorepo, нам потрібно використовувати компілятор TypeScript. У корені monorepo виконайте:

npx tsc --build

Ця команда скомпілює всі пакунки за відповідними файлами tsconfig.json.

Висновок

У цьому посібнику ми розповідали, як налаштувати та використовувати TypeScript у монорепо. Організувавши свій код у структурі монорепо, ви можете легко поділитися кодом між кількома пакетами, що зробить ваш процес розробки ефективнішим. Завдяки надійному набору тексту та посиланням на проект у TypeScript це налаштування ідеально підходить для великих програм або спільних бібліотек.