http://localhost:1313/tags/pnpm/ Recent content in Pnpm on Saiga Hugo zh-cn wuwenzen@outlook.com (wuwj) wuwenzen@outlook.com (wuwj) Sun, 15 Jan 2023 00:00:00 +0000 http://localhost:1313/posts/2023-01-15-monorepo-migration/ Sun, 15 Jan 2023 00:00:00 +0000wuwenzen@outlook.com (wuwj) http://localhost:1313/posts/2023-01-15-monorepo-migration/ <p>之前团队的前端项目是这样管理的：</p> <ul> <li>每个系统一个 Git 仓库；</li> <li>各自有一套构建脚本、一份依赖清单；</li> <li>公共组件、工具要么复制粘贴，要么用「半私有」的 NPM 包。</li> </ul> <p>结果就是：</p> <ul> <li>组件 bug 修一份，要手动同步 N 个仓库；</li> <li>依赖升级经常有「版本错乱」；</li> <li>CI 流水线一堆重复配置。</li> </ul> <p>于是我们决定把几个核心前端项目合到一个 Monorepo 里。<br> 这篇文章就是那次迁移的实战记录：<strong>工具选择、包划分、依赖管理、CI 改造，全流程。</strong></p> <hr> <h2 id="1-为什么要搞-monorepo">1. 为什么要搞 Monorepo？</h2> <p>总结下来就是三点：</p> <ol> <li> <p><strong>公共代码复用</strong></p> <ul> <li>组件库、Hooks、工具函数不用再复制粘贴；</li> <li>bug 修一次，多项目同步升级。</li> </ul> </li> <li> <p><strong>一致的工程规范</strong></p> <ul> <li>统一 ESLint/Prettier/Commit 规范；</li> <li>统一构建脚手架和发布流程。</li> </ul> </li> <li> <p><strong>协同开发体验好</strong></p> <ul> <li>打开一个仓库就能看到相关项目；</li> <li>修改组件立刻能在多个应用里验证。</li> </ul> </li> </ol> <p>当然，Monorepo 不是银弹，仓库会变大、CI 要更精细。<br> 所以「是否值得」的标准是：</p> <blockquote> <p><strong>项目之间有明显共享，且会长期共同演进。</strong></p> </blockquote> <hr> <h2 id="2-工具选型pnpm--turborepo">2. 工具选型：pnpm + Turborepo</h2> <p>我们调研了一圈：Lerna、Nx、Yarn Workspaces、pnpm Workspace、Turborepo……<br> 最后选的是：<strong>pnpm Workspace + Turborepo</strong>，原因：</p> <ul> <li>pnpm：硬链接节省磁盘空间、依赖管理清晰、速度快；</li> <li>Turborepo：任务编排 + 缓存好用，学习成本相对较低。</li> </ul> <h3 id="21-仓库结构">2.1 仓库结构</h3> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-bash" data-lang="bash"><span style="display:flex;"><span>repo-root </span></span><span style="display:flex;"><span>├── apps </span></span><span style="display:flex;"><span>│ ├── manager-web <span style="color:#75715e"># 管理端</span> </span></span><span style="display:flex;"><span>│ ├── investor-web <span style="color:#75715e"># 投资人 Web</span> </span></span><span style="display:flex;"><span>│ └── mini-program <span style="color:#75715e"># 小程序（uni-app 等）</span> </span></span><span style="display:flex;"><span>├── packages </span></span><span style="display:flex;"><span>│ ├── ui-components <span style="color:#75715e"># 通用 UI 组件库</span> </span></span><span style="display:flex;"><span>│ ├── shared-utils <span style="color:#75715e"># 工具函数</span> </span></span><span style="display:flex;"><span>│ └── eslint-config <span style="color:#75715e"># 统一 ESLint 配置</span> </span></span><span style="display:flex;"><span>├── package.json </span></span><span style="display:flex;"><span>├── pnpm-workspace.yaml </span></span><span style="display:flex;"><span>└── turbo.json </span></span></code></pre></div><p><code>pnpm-workspace.yaml</code>：</p>