如何将 Turborepo 用于使用 Create React App 创建的现有 React 应用程序以使其成为 monorepo？答案

【问题标题】：How to use Turborepo for an existing react app created with Create React App in order to make it a monorepo?如何将 Turborepo 用于使用 Create React App 创建的现有 React 应用程序以使其成为 monorepo？
【发布时间】：2023-04-04 16:10:01
【问题描述】：

我有一个使用 create react app 制作的有趣项目。我想将同一个应用程序转换为浏览器扩展。这个想法迫使我把这个项目变成一个单一的回购。因为在这两个应用程序中，我将使用相同的组件、钩子、提供程序等。

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

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

应用程序/
- app1/
- app2/
包/
- 组件/
- 挂钩/
- 供应商/
- 样式/
package.json
package-lock.json

我会将包文件夹中的monorepo依赖项导入到应用程序文件夹中的应用程序中。

例如；

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

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

提前感谢您的时间和回答

【问题讨论】：

您建议的包结构看起来不错。它应该适用于 NPM 工作区（NPM >=7）或纱线。我不太明白问题是什么？像 turborepo 这样的运行器位于 npm / yarn 等工作区的顶部，增加了缓存和便利性——它们很方便，但这是一个小而简单的 monorepo，所以没有它可能没问题。是什么阻止了您使用 NPM Workspaces 进行设置，保持简单，然后如果构建时间变得麻烦，并且您发现需要 turborepo 功能（如缓存）的问题，请在需要时添加它？
NPM 工作区在将不同的包指向不同的应用程序时工作正常。问题是，您必须编译组件文件夹才能使其工作。我当前的解决方案是在组件包中使用 NWB。它可以工作，但您需要在启动其中一个应用程序之前运行额外的命令来编译它。

标签： reactjs create-react-app monorepo npm-workspaces turborepo

【解决方案1】：

Turborepo 对如何做到这一点有很好的解释，对 in their docs。

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

npm install turbo -D

您唯一应该注意的是 turbo 任务本身。因此，您将不得不调整启动脚本和管道。

【讨论】：