Monorepo

写在后面Monorepo这个词你应该不止一次据说了，像Vue3、Vite、ElementPlus等优良开源我的项目都是应用Monorepo的形式治理我的项目，且这里说到的这几个我的项目都是采纳pnpm作为包管理工具。这篇文章就应用pnpm构建一个简略的Monorepo形式治理的我的项目。 什么是Monorepo？什么是pnpm？Q：什么是Monorepo？A：Monorepo是一种项目管理形式，就是把多个我的项目放在一个仓库外面，能够参考神三元大佬的一篇文章：古代前端工程为什么越来越离不开 Monorepo?，这篇文章中介绍了Monorepo的概念、收益以及MulitRepo的弊病。Q：什么是pnpm？A：pnpm就是一个包管理工具，原生反对Monorepo，比npm和yarn更快一些，其余的能够参考官网和神三元大佬的另一篇文章：为什么当初我更举荐 pnpm 而不是 npm/yarn? 搞一个Monorepo的demo玩玩当初咱们就开始应用pnpm来构建一个Monorepo，在闲事开始之前，你先须要保障你的电脑中具备Node.js，我的版本的是16.9.0。首先你须要有pnpm这个工具，装置的话能够从官网找办法，或者间接应用npm装置，命令如下：npm i pnpm -g 当初咱们开始搞事件。第一步，创立一个我的项目的根目录，这里就叫monorepo-demo，咋创立都可，这里应用的是命令：mkdir monorepo-demo 第二步，初始化package.json，这个没啥说的，命令如下：pnpm init 这里我对内容做了一点批改，package.json的内容如下：{ "name": "monorepo-demo", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1"}, "type": "module", "keywords": [], "author": "ywanzhou", "license": "MIT"} 这里我次要增加了一个type字段，这里我应用ESModule模块化标准。第三步，创立pnpm-workspace.yaml文件，这个文件定义了工作空间的根目录，内容如下：packages: 'packages/ **'当初咱们就能够在packages中创立多个我的项目了，目录构造如下：monorepo-demo├── package.json├── packages│ ├── components│ │ ├── index.js│ │ └── package.json│ ├── core│ │ ├── index.js│ │ └── package.json│ ├── utils│ │ ├── index.js│ │ └── package.json├── pnpm-lock.yaml└── pnpm-workspace.yaml ...

本文大部分图片来自互联网 前言2021 年 12 月 9 号，Vercel 的官网博客上公布了一篇名为 Vercel acquires Turborepo to accelerate build speed and improve developer experience 的博文，正如其题目所说，Vercel 收买了 Turborepo，以减速构建速度以及进步开发体验。 Turborepo 是一个用于 JavaScript 和 TypeScript 代码库的高性能构建零碎。通过增量构建、智能近程缓存和优化的任务调度，Turborepo 能够将构建速度进步 85% 或更多，使各种规模的团队都可能保护一个疾速无效的构建零碎，该零碎能够随着代码库和团队的成长而扩大。博文中曾经简明扼要的突出了 Turborepo 的劣势，本文则会从现有的理论场景登程，谈谈大型代码仓库（Monorepo）可能会遇到的一些问题，再联合业界现有的解决方案，看看 Turborepo 在工作编排方面做出了哪些翻新与冲破。 一个合格 Monorepo 的自我涵养随着业务的倒退和团队的变动，业务型 Monorepo 中的我的项目会逐步减少，极其一点的例子就是 Google 将整个公司的代码都放到一个仓库中，仓库的大小达到了 80TB。 业务型 Monorepo：不同于 lib 型 Monorepo（React、Vue3、Next.js 以及 Babel 等狭义上的 packages）,业务型 Monorepo 将多个业务利用 App 及其依赖的专用组件库或工具库组织到了一个仓库中。 ——《Eden Monorepo 系列：浅析 Eden Monorepo 工程化建设》我的项目数量的减少意味着在享受 Monorepo 劣势的同时，也带来了微小的挑战，优良的 Monorepo 工具能够让开发者毫无累赘的享受 Monorepo 的劣势，而不好用的 Monorepo 工具能够让开发者痛不欲生，甚至让人狐疑 Monorepo 存在的意义。 ...

前言五月份分享了 利用级 Monorepo 优化计划 ，次要论述了之前 monorepo （Yarn + Lerna）存在的问题以及解决方案，但在该分享里，并没有波及到 pacakge 公布相干的内容（在那段期间次要是以利用 app 开发为主），偶有 pacakge 开发也是依赖关系较为简单的场景（单包开发/公布），应用 npm publish 就能搞定。 随着后续的倒退（次要是团队内另一个仓库的迁入），package 开发场景占了相当重的比例（仓库代码行数达到了百万级，项目数超过 100），但多包公布体验并不是很好，次要集中在以下 3 个方面： 公布形式与 Lerna 差别较大，而 Rush 相干命令文档较为简陋（太简陋了，参数试了很多遍），无奈迅速上手；公布流程不够标准，根本靠手敲命令行；短少规范的开发工作流。本次分享便是为了解决以上问题，在理论中摸索出 Monorepo 多包公布场景的较佳实际。 Workspace protocol (workspace:)在进行探讨之前，先要理解 Workspace protocol (workspace:)，这里以 pnpm 为例，下述例子摘自 Workspace | pnpm 默认状况下，如果工作区中可用的包版本与申明的范畴相匹配，pnpm 将从工作区链接包。比方 monorepo 中存在 foo@1.0.0，而 monorepo 内另一个我的项目 bar 依赖 "foo: ^1.0.0"，那么 bar 就会应用工作区中的 foo，假使 bar 依赖 "foo: 2.0.0"，那么 pnpm 将会从远端下载 foo@2.0.0 供 bar 应用，这就引入了一些不确定性。 应用 workspace 协定时，pnpm 将回绝解析为本地工作区包以外的任何内容。因而，如果设置 "foo": "workspace:2.0.0"，这次装置将失败，因为工作区中不存在 "foo@2.0.0"。 ...

随着前端工程日益简单，某些业务或者工具库通常波及到很多个仓库，那么工夫一长，多个仓库开发弊病日益露出，由此呈现了一种新的项目管理形式——Monorepo。本文次要以 Monorepo 的概念、MultiRepo 的弊病、Monorepo 的收益以及 Monorepo 的落地这几个角度来意识和学习一下 Monorepo，文末会有思考题，欢送大家来踊跃探讨。 什么是 Monorepo?Monorepo 其实不是一个新的概念，在软件工程畛域，它曾经有着十多年的历史了。概念上很好了解，就是把多个我的项目放在一个仓库外面，绝对立的是传统的 MultiRepo 模式，即每个我的项目对应一个独自的仓库来扩散治理。 古代的前端工程曾经越来越离不开 Monorepo 了，无论是业务代码还是工具库，越来越多的我的项目曾经采纳 Monorepo 的形式来进行开发。Google 宁愿把所有的代码都放在一个 Monorepo 工程上面，Vue 3、Yarn、Npm7 等等出名开源我的项目的源码也是采纳 Monorepo 的形式来进行治理的。 个别 Monorepo 的目录如下所示，在 packages 寄存多个子项目，并且每个子项目都有本人的package.json: ├── packages| ├── pkg1| | ├── package.json| ├── pkg2| | ├── package.json├── package.json 那 Monorepo 到底有什么魔力，让大家如此推崇，落地如此之广呢？ MultiRepo 之痛要想晓得 Monorepo 的劣势，首先得弄清楚之前的开发方式有什么痛点。 之前传统的形式 MultiRepo 当中，每个我的项目都对应独自的一个代码仓库。我之前也是用这种形式开发的，是真真切切地感触到了这种形式带来的诸多弊病。当初就和大家一一分享一下。 代码复用在保护多个我的项目的时候，有一些逻辑很有可能会被屡次用到，比方一些根底的组件、工具函数，或者一些配置，你可能会想: 要不把代码间接 copy 过去，多省事儿！但有个问题是，如果这些代码呈现 bug、或者须要做一些调整的时候，就得批改多份，保护老本越来越高。 那如何来解决这个问题呢？比拟好的形式是将公共的逻辑代码抽取进去，作为一个 npm 包进行公布，一旦须要改变，只须要改变一份代码，而后 publish 就行了。 但这真的就完满解决了么？我举个例子，比方你引入了 1.1.0 版本的 A 包，某个工具函数呈现问题了，你须要做这些事件： ...