Как использовать TypeScript в настройке Monorepo

Настройка монорепозитория позволяет управлять несколькими пакетами или проектами в одном репозитории. С TypeScript эта настройка особенно эффективна для совместного использования типов, интерфейсов и даже утилит в разных пакетах. Это руководство проведет вас через настройку TypeScript в среде монорепозитория.

1. Настройка монорепозитория

Чтобы настроить монорепозиторий, вы можете использовать такие инструменты, как npm workspaces или yarn workspaces. Эти инструменты позволяют управлять несколькими пакетами в одном репозитории и упрощают совместное использование кода между проектами.

1.1 Инициализация монорепозитория

Сначала создайте новую папку для вашего монорепозитория и инициализируйте ее с помощью 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 и необходимые зависимости в корень вашего монорепозитория:

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 понимать импорт из разных пакетов в монорепозитории.

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. Строительство Монорепо

Чтобы скомпилировать весь код TypeScript в monorepo, нам нужно использовать компилятор TypeScript. В корне monorepo выполните:

npx tsc --build

Эта команда скомпилирует все пакеты, следуя соответствующим файлам tsconfig.json.

Заключение

В этом руководстве мы рассмотрели, как настроить и использовать TypeScript в монорепозитории. Организовав свой код в структуре монорепозитория, вы можете легко совместно использовать код в нескольких пакетах, что делает процесс разработки более эффективным. Благодаря строгой типизации и ссылкам на проекты TypeScript эта настройка идеально подходит для крупномасштабных приложений или общих библиотек.