前言

阅读本文章，需要你：

1. 已经了解 Turborepo 是什么？

2. 已经使用 Turborepo 完成模板项目的初始化

3. 不知道怎么再已有的项目中添加新的应用

基础概念

想要在项目中添加新的应用，我们需要先看一下当前的项目目录结构。我们使用 Turborepo 初始化的项目中，会包含 apps 和 packages 目录。根据官方文档描述，这是一个约定的目录结构，简单来说：

• apps 目录应该包含我们通常开发的可启动的应用程序，例如 Next.js 或 Svelte 应用程序。

• packages 目录应该包含被其他应用依赖的包，一般是公共的模块。

所以，如果我们要添加新的应用，最终的效果是要体现在 apps 目录中的。经过相关的查询和摸索，添加新应用需要如下的操作：

1. 在 apps 目录下，新建新项目的目录，目录名称不能与其他应用重复

2. 在新的应用目录下，完成新项目的初始化

3. 在整个项目的根目录下，完成整个项目的更新

示例

下面是以添加 Vue 应用为示例，展示整个操作流程：

1. 在 apps 目录下新建文件夹，目录名称以 vue-learn 作为示例。

2. 在 vue-learn 目录下，执行 Vue 应用的初始化脚本，这里使用 pnpm create [email protected] 来初始化应用，根据相关提示完成应用的初始化。初始化完成后，目录中应该包含 Vue 项目的正常目录结构和模板代码、配置。

3. 在整个 Turborepo 项目的根目录中（apps 目录的上一层），执行 pnpm install，完成整体项目的更新。

4. 使用 Turborepo 项目中 package.json 自带的 dev 脚本，或者使用 turbo run dev --parallel 命令，校验新增的应用能否正常启动，如果新增应用的前端页面可以正常展示则完成整个新建流程。

总结

这是只是针对笔者在 Turborepo 使用过程中遇到问题的一点简单方案。其中一些概念解释和操作并不能保证是合理和正确的，只是经过自身简单的理解和实践总结的，有条件的尽量先查阅最新的官方文档和搜索信息。