Как использовать Turborepo для существующего приложения для реагирования, созданного с помощью приложения Create React, чтобы сделать его монорепозиторием?

Question

У меня есть забавный проект, созданный с помощью приложения create react. Я хочу преобразовать то же приложение в расширение браузера. Эта идея вынуждает меня сделать проект монорепо. Потому что в обоих приложениях я буду использовать одни и те же компоненты, хуки, провайдеры и т. Д.

Я не хочу использовать рабочие пространства Lerna или Yarn. И это будет мой первый монорепозиторий. Я хочу начать с Турборепо. Однако я не мог представить, как заставить его работать по-хорошему.

Моя целевая структура папок существует ниже

• Программы/
• • app1 /
• • app2 /
• пакеты /
• • компоненты/
• • крючки /
• • провайдеры /
• • стили /
• package.json
• пакет-lock.json

Я буду импортировать зависимости monorepo из папки пакетов в приложения, существующие в папке приложений.

Например;

      import { useExampleHook } from '@projectname/hooks'
import { ExampleComponent } from '@projectname/components'

Если у вас есть другое решение, помимо Turborepo, дайте мне знать. Рабочие области NPM также являются приемлемым решением. Но турборепо имеет приоритет из-за лучшей производительности.

Заранее спасибо за ваше время и ответ

Answer 1

TL;DR:

Вы можете сделать это, используяyarn workspacesчтобы сделать проект монорепозиторием, а затем добавить к нему турборепозиторий в качестве зависимости от разработчиков.

Шаги:

1. Создайте рабочую область пряжи .
2. Настройте корень ваших репозиториевpackage.jsonфайл с шага 1 как:

      {
  "private": true,
  "workspaces": [
    "packages/*",
    "apps/*"
  ],
}

3. Теперь, исходя из вашего примера, вы хотите импортировать файлы изpackages/hooksвapps/app1, сделайте следующее:

      //packages/hooks/package.json
{
  "name": "hooks", // This can also be "@projectname/hooks" if you prefer
  "version": "1.2.3",
  ...
}

      //apps/app1/package.json
{
  "name": "app1",
  "version": "2.3.4",
  "dependencies": {
    "hooks": "1.2.3"  //This version here must be same as the one in hooks package.json
  }
}

      // Some js file in apps/app1/...
import { useExampleHook } from "hooks";
...

4. Теперь, если вы хотите, вы сможете установить Terborepo для управления своим монорепозиторием. (Лично не пробовал этот шаг, но теоретически должен работать)

Советы:

• Просмотрите документы и учебные пособия по рабочей области пряжи.
• Если вы хотите преобразовать существующий проект реагирования в монорепозиторий, сначала перенесите все свои файлы в папку, напримерroot-dir/apps/app1а затем следуйте шагу 1 внутриroot-dir.

Answer 2

У Turborepo есть отличное объяснение того, как это сделать, прямо в их документах .

Вкратце:Turborepo считается таскраннером. Таким образом, он добавляется как зависимость разработки к вашему существующему проекту.

npm install turbo -D

Единственное, на что стоит обратить внимание, так это на сами турбо-задачи. Итак, вам придется настроить свои стартовые сценарии и конвейеры.