爱乐的陈
爱乐的陈

2022 年,小福今年 2 岁,「爱乐之城」期望可以全平台打通。

使用 Nx 开发 Monorepo 项目

「爱乐之城」最新版代码库使用了 Nx 作为构建项目的工具。

首先需要对 Monorepo 这个概念有基本认知:它把相关的所有项目(前端、后端、App 端、不同子业务)通通放在一个文件夹下管理。它的好处包括共享依赖包节约资源(这一点其实 pnpm 也能做到)、一次性启动整套服务等,但我觉得它最大的优点,还是细粒度的代码复用。比如后端如果是用 node.js 写的话,前、后端可以复用相同的逻辑。前端的不同业务(站点、管理后台),也可以复用相同的 UI 展示。

我刚学完一个 egghead 上一个介绍 Nx 基本用法的课程,学的过程中也模仿着用 Nx 给新的「爱乐之城」搭了底座,感觉 Nx 的配套系统很完善,确实有利于整个项目后续的扩展。推荐感兴趣的朋友尝试,也欢迎更有经验的前辈留言分享更多 tips。

  • 通过 create-nx-workspace npm 包创建新的 Nx 项目。
  • nx.json 文件中是关于 Nx 的配置;workspace.json 文件中是关于项目里所有应用的配置(更常用)。
  • Nx 项目中有 apps 和 libs 文件夹,前者包含了项目中各个应用(站点前端、管理后台前端、后端 API、移动端等),后者才是占了代码的大部分,是各种可以被复用的逻辑。apps 应用组合 libs 中提供的各种功能。
  • nx generate @nrwl/react:application xxx
  • --dryRun 参数可以不实际修改文件,让我们先确认改动是否符合预期。
  • 在 project.json 中可以配置 styles 和 assets 的文件路径。
  • 对 libs 的 alias 引用是通过配置 tsconfig.base.json 文件中的 paths,如果是通过 Nx CLI 创建的 apps/libs,这个值是自动更新的。
  • Nx 的杀手级功能,查看 apps/libs 间的依赖关系:nx graph
  • nx g library 指定 appProject 会在对应的 app 中自动生成路由。 
  • nx g app 创建后台应用时通过指定 frontendProject 可以自动中前端项目中生成对应的用于本地联调的 proxy 文件。
  • 一个命令启动多个应用:
    a). nx run-many --target=serve --projects=store,api --parallel=true
    b). 配置自定义 target,指定 builder 为 "@nrwl/workspace:run-commands",在 options 中配置 commands。
  • 在前端、后端应用中共享代码的实例包括:interface library、共享业务逻辑的 library 等。
  • 可以整合 Storybook、Cypress 工具做组件开发、测试。
  • 基于 Nx 依赖关系有一个很重要的应用:
    nx affected:build --base=xxx
    target 只会作用于当前项目和对其有依赖关系的所有项目。
    nx affected:graph 可以展示当前改动的项目和对其有依赖的所有项目。
  • Nx 的 computation cache 可以保存之前操作的结果,对增量变动进行运算。再结合 Nx Cloud,甚至可以在团队中同步缓存!确实是很亮眼、很吸引的功能。
  • 可以通过 nx migrate latest 半自动地快速更新项目。

注:封面图是跟着这个课程走下来,重新搭建的「爱乐之城」项目框架的依赖图。




CC BY-NC-ND 2.0 版权声明

喜欢我的文章吗?
别忘了给点支持与赞赏,让我知道创作的路上有你陪伴。

加载中…

发布评论