如何将 Turborepo 用于使用 Create React App 创建的现有 React 应用程序，以使其成为单一存储库？

Question

我有一个用 create React app 制作的有趣项目。我想将同一应用程序转换为浏览器扩展。这个想法迫使我将该项目设为单一存储库。因为在这两个应用程序中，我将使用相同的组件、钩子、提供程序等。

我不想使用 Lerna 或 Yarn 工作区。而且，这将是我的第一个单一仓库。我想开始使用 Turborepo。但是，我无法想象如何让它以良好的方式工作。

我的目标文件夹结构位于下面

• 应用程序/
• • 应用1/
• • 应用2/
• 套餐/
• • 组件/
• • 挂钩/
• • 提供商/
• • 款式/
• package.json
• package-lock.json

我会将包文件夹中的 monorepo 依赖项导入到 apps 文件夹中存在的 apps 中。

例如；

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

如果您除了 Turborepo 之外还有其他解决方案，请随时告诉我。 NPM 工作区也是一个可以接受的解决方案。但是，turborepo 由于性能更好而具有优先权。

提前感谢您的时间和答复

Answer 1

TL；博士：

您可以通过使用

yarn workspaces

将项目设为 monorepo，然后将turborepo 添加到其中作为开发依赖项来完成此操作。

步骤：

1. 创建一个 yarn 工作区。
2. 将步骤 1 中的存储库根

   package.json

   文件配置为：

{
  "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 来管理您的 monorepo。 （没有亲自尝试过这一步，但理论上应该可行）

温馨提示：

• 浏览纱线工作区文档和教程。
• 如果您想将现有的 React 项目转换为 monorepo，请首先将所有文件传输到诸如

  root-dir/apps/app1

  之类的文件夹，然后从 root-dir 内的

  步骤 1

  开始操作。

Answer 2

Turborepo 对如何做到这一点有很好的解释，在他们的文档中。

简而言之： Turborepo 被认为是一个任务运行程序。因此，它将作为开发依赖项添加到您现有的项目中。

npm install turbo -D

您唯一应该注意的是涡轮任务本身。 因此，您必须调整启动脚本和管道。