在这篇文章中,我们将了解什么是monorepo,以及monorepos如何帮助以更好的开发体验更快地开发应用程序。我们将讨论使用Nx开发工具来管理monorepo的优势,并学习如何使用这些工具来构建Next.js应用程序。
这篇文章的代码可以在GitHub上找到。你可以在这里找到我们正在构建的应用程序的工作演示。
什么是Monorepo,以及为什么我们应该考虑使用它
单库是一个包含多个项目或项目组件的应用程序、工具和配置的单一仓库。它是为每个项目或项目的一部分创建单独的资源库的一种替代方案。
考虑一个场景,我们正在使用一些前端库或框架构建一个仪表盘应用程序。这个前端应用程序的代码可能存储在dashboard 资源库中。这个资源库使用的UI组件可能存储在另一个名为components 的资源库中。现在,每次我们更新components 仓库时,我们都必须进入dashboard 仓库并更新components 的依赖关系。

为了缓解这个问题,我们可以将components 版本库与dashboard 版本库合并。

然而,营销网站的另一个前端应用程序可能存储在marketing 仓库中,它依赖于components 仓库。因此,我们必须复制components ,并将其与marketing 合并。然而,正因为如此,任何与components 有关的修改都必须在两个地方进行,这并不理想。

上述问题可以通过使用单库来解决,在单库中,dashboard 、components 和marketing 组件都在一个单一的仓库中。

使用monorepo有很多好处。
- 更新软件包更容易,因为所有的应用程序和库都在一个单一的资源库中。由于所有的应用程序和包都在同一个版本库中,添加新的代码或修改现有的代码可以很容易地测试和发送。
- 代码的重构更容易,因为我们只需要在一个地方做,而不是在多个仓库中复制同样的东西。
- 单版本允许CI/CD管道的一致配置,这些配置可以被同一仓库中的所有应用程序和库所重复使用。
- 由于有了Nx这样的工具,包的发布也变得更加容易。
Nx CLI将帮助我们生成新的Next.js应用程序和React组件库。它还将帮助我们运行一个具有热模块重新加载功能的开发网络服务器。它还可以做一堆其他重要的事情,如打线、格式化和生成代码。使用这样的CLI的好处是,它将在我们的代码库中提供一种标准化的感觉。随着我们代码库的增长,管理和理解底层的复杂性是非常困难的。Nx CLI通过提供自动生成代码的工具,解决了大部分的复杂问题。
需要的软件
为了运行我们的应用程序,我们需要安装以下软件。
这些技术将在应用程序中使用。
- Next.js用于构建我们的应用程序
- 用于向我们的应用程序添加样式的Styled Components
注意:如果你想了解更多关于如何使用nvm安装多个版本的Node.js,你可以阅读。
我们还需要一个Product Hunt账户。
安装和启动Nx工作区
我们可以使用以下命令安装Nx CLI。
npm install nx -g
上述命令将全局安装Nx CLI。这很有用,因为现在我们可以在任何目录下使用这个CLI创建一个新的Next.js应用程序。
接下来,我们需要在我们要创建monorepo的目录下运行以下命令。
npx create-nx-workspace@latest nx-nextjs-monorepo
上述命令将创建一个Nx工作空间。所有的Nx应用程序都可以驻留在Nx工作空间内。
你可能需要用你的工作区的名字代替nx-nextjs-monorepo 。它可以被命名为任何你喜欢的东西。工作区的名称一般是一个组织、公司等的名称。
当我们运行上述命令时,我们将得到一组步骤,这些步骤将创建我们想用Nx创建的什么类型的应用程序。
-
第1步:它首先会问我们要创建什么类型的应用程序。我们将从选项列表中选择Next.js。

-
第2步:它将询问我们想要创建的应用程序的名称。我们可以叫它任何名字。在这种情况下,我们将把它命名为 "product-hunt"。

-
第3步:它将问我们要使用什么类型的样式表。我们将选择 "风格组件"。

-
第4步:它会问我们是否要使用Nx Cloud,这是一个加速Nx应用程序构建的平台。在这种情况下,我们将选择 "不",但请检查它。

Nx现在会将所有的文件和目录支架化,为我们生成以下结构。

apps 目录包含我们所有的应用程序。在我们的例子中,这个目录将包含我们正在构建的Next.js应用程序(名为product-hunt )。这个目录还包含使用Cypress搭建的端到端测试应用程序(名为product-hunt-e2e )。
libs 目录包含所有的库,如组件、实用函数等。这些库可以被apps 目录中的任何应用程序使用。
tools 目录包含所有的自定义脚本、codemods等,这些都是用来对我们的代码库做某些修改的。
注意:关于目录结构的更多信息可以在这里找到。
