年轻人的第一个前端 monorepo 应该怎么选型


如果你正在调研 monorepo 的技术选型,那你一定不能错过 nx。nx 是一个用来管理 monorepo 的构建系统,它提供了一系列的工具来帮助你实现代码的模块化、标准化,让开发人员在管理任意规模的 monorepo 时仍能够游刃有余。

nx 提供了哪些功能?

代码生成器
通过生成器,nx 可以为你自动地创建、修改各种样板代码:

# 替代 create-react-app 创建 react 项目
$ nx g @nrwl/react:application my-app
# 创建一个新的组件
$ nx g component my-component --project=my-app
# 给项目添加 tailwind
$ nx g setup-tailwind --project=my-app

任务执行器

swc?esbuild?vite?vitest?playwright?放手去尝试这些新的工具,你可以先在单个项目中试点,当你做好准备后,就可以把单个项目中的实践封装为任务执行器,接下来 nx 就可以帮助你快速地将新的工具链应用到各个项目中。

任务编排

你可以放心地把工具库、业务模块提取成 monorepo 中独立的项目,nx 通过依赖分析能力,能够自动地理清项目之间的依赖关系,正确地帮你编排构建、测试脚本的执行顺序,提高执行工具构建、测试的执行效率。

nx 适用于新项目吗?

我非常推荐新的项目采用 nx,你可以利用 nx 插件,快速地创建各种新项目必需的各种样板代码、设置好各种开发工具的配置文件,再也不用去翻看 「XXX Get Started」文档。工具链的最佳实践由 nx 搞定,你只需要在功能实现上展示专业水平。

nx 适用于已有的小型项目吗?

处于代码量茁壮成长阶段的小型项目,需要注意代码的模块化、标准化,避免让代码库成长为超大的面条怪物。

在拆分模块的时候,可以先用生成器定制符合项目需求的代码样板,减少提取项目模块的工作量。接着,你还可以为项目中使用的开发工具(Storybook、Cypress 等)创建执行器,方便在提取出来的项目模块中复用同样的工具链。

nx 适用于已有的大型单体项目吗?

大型项目往往会遇到编译缓慢的问题,通过将大型项目拆分成多个模块,利用 nx 的构建缓存以及增量构建功能,可以提高项目整体构建速度,极大地提升开发体验。

nx 适用于将已有的多仓库项目改造成 monorepo 吗?

nx 提供的 project.json 能够帮助你抹平不同项目使用的工具脚本之间的差异,让你可以用尽量小的代价使整个 monorepo 工作起来。项目成功运行之后,你就可以考虑使用执行器来替换掉各个项目中的开发脚本,减少维护各种工具脚本的负担。

需要更换包管理器吗?

简单来说,nx 跟任何包管理工具都能够很好的工作,它并不依赖于某种独特的包管理机制。但这也是 nx 的不足之处,它没法帮你解决管理第三方依赖时可能会遇到的问题(NPM 中的 phatom 与 doppelgangers 问题),你可能需要针对这种问题去选择适合自己的包管理工具。

该用怎样的方式管理 monorepo ?

我的 nx 实践体验可以总结为三点,希望对你有所启发:

  1. 拆分模块,利用构建缓存、任务编排、增量构建提高构建效率
  2. 用样板代码生成器,保持各个模块代码结构上的一致性,减少创建、更新样板代码的手动操作,在规模庞大的 monorepo 中,这点尤其重要
  3. 复用执行器,为 monorepo 中所有的模块提供标准化的开发体验

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

You can use markdown syntax in comment