Настройка нашего монорепо pnpm

В этом посте мы реализуем базовую структуру монорепо, о которой мы упоминали в конце технического обзора высокого уровня.

Для краткости напомним, что у нас будет три пакета:

• app
• bot
• db

Для каждого из них мы создадим только базовую структуру пакета. Вот как будет выглядеть конечная структура (некоторые файлы/каталоги исключены, чтобы сосредоточиться на изменениях, которые мы будем вносить):

.
├── app
│  ├── package.json
│  ├── pages
│  ├── public
│  ├── README.md
│  └── tsconfig.json
├── bot
│  ├── package.json
│  ├── src
│  │  └── index.ts
│  └── tsconfig.json
├── db
│  ├── package.json
│  ├── src
│  │  └── index.ts
│  └── tsconfig.json
├── package.json
├── pnpm-lock.yaml
├── pnpm-workspace.yaml
├── README.md
└── tsconfig.json

Дополнительные настройки монорепо, такие как использование пакетов в качестве зависимостей друг от друга, инструменты сборки и т.д., будут представлены позже.

Создание рабочего пространства pnpm

Поскольку мы используем pnpm, установка монорепо не требует много настроек с нашей стороны.

По сути, нам просто нужно создать файл pnpm-workspace.yaml, который определяет каталоги пакетов в нашем монорепо:

packages:
  - 'app'
  - 'bot'
  - 'db'

Благодаря этому изменению pnpm знает, что директории app, bot и db являются пакетами в нашем монорепо.

Теперь, когда у нас есть этот файл, мы можем настроить наши каталоги пакетов.

Создание пакета app

Поскольку app является приложением Next.js, мы будем использовать create-next-app для создания этого пакета: pnpm create next-app --ts app.

Установка выполняется, как ожидалось, и зависимости добавляются в корневой файл pnpm-lock.yaml.

Мы можем запустить наше приложение, чтобы проверить, что оно работает: pnpm --filter app run dev.

Я просто хочу отметить, насколько крут pnpm. Флаг --filter позволяет нам увеличить масштаб определенных пакетов для выполнения наших команд. В приведенной выше команде мы используем --filter app, чтобы направить pnpm run dev в каталог app.

Прежде чем двигаться дальше, нам нужно исправить ошибку eslint в каталоге app: Parsing error: Cannot find module 'next/babel'.

Чтобы решить эту проблему, необходимо обновить app/.eslintrc.json для расширения из next/babel:

{
  "extends": ["next/babel", "next/core-web-vitals"]
}

Создайте пакеты bot и db.

Подготовьте typescript.

Поскольку bot и db будут являться библиотеками, а не приложениями React, мы можем настроить typescript в корне, и оба пакета будут расширять свою конфигурацию из него.

Чтобы начать, мы установим несколько пакетов: pnpm i typescript @types/node -w @tsconfig/node16-recommended.

Флаг -w говорит pnpm, что мы хотим установить зависимости в корень.

Пакет @tsconfig/node16-recommended содержит файл tsconfig.json с рекомендуемой конфигурацией TypeScript. Мы будем использовать его в нашем корневом файле tsconfig.json:

{
  "extends": "@tsconfig/node16-strictest/tsconfig.json",
  "exclude": ["app"]
}

Мы также исключим каталог app, потому что Next.js использует свой собственный файл tsconfig.json.

Создайте пакет bot.

bot
├── package.json
├── src
│  └── index.ts
└── tsconfig.json

Мы создадим папку bot и внутри нее package.json:

{
  "name": "bot",
  "version": "0.0.0",
  "private": true
}

Мы также создадим bot/tsconfig.json:

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

Эта конфигурация включает src в файлы, которые будет компилировать TypeScript, а опция extends означает, что мы повторно используем конфигурацию, указанную в нашем корневом tsconfig.json.

Создайте пакет db.

db
├── package.json
├── src
│  └── index.ts
└── tsconfig.json

Для создания этого пакета мы сделаем все то же самое, что и для создания пакета bot, только заменим слово bot на db.

Потрясающе! Теперь у нас есть монорепо! Это дает нам большую гибкость и ясность в том, как мы настраиваем и используем наши пакеты.

Чтобы проверить PR для этого сообщения, загляните сюда: https://github.com/Developer-DAO/discord-server-info/pull/10.