这些前端新技术你很难再忽视了 —— Monorepo

新系列《这些前端新技术你很难再忽视了》，包括：SolidJS、Svelte、Tauri、Bun、Schema等。每一个都引领前端技术演变趋势，很有必要了解。

咱们将采用 5W1H 分析法，即 What（何事）、Why（何因）、Where（何地）、When（何时）、何人（Who）、How（何法）6 个维度来解析这些“新玩意儿”。

本篇带来 —— Monorepo

闲话少说，冲了~

• 点赞收藏关注，今晚一夜暴富 👍👍👍

🤔What

什么是 Monorepo？

答：Monorepo可以理解为一种基于仓库的代码管理策略，它提出将多个代码工程“独立”的放在一个仓库里的管理模式。每个代码工程在逻辑上是可以独立运行开发以及维护管理的。Monorepo 在实际场景中的运用可以非常宽泛，甚至有企业将它所有业务和不同方向语言的代码放在同一个仓库中管理。

🧐Why

为什么是 Monorepo？

答：

Monorepo：只有一个仓库，并且把项目拆分多个独立的代码工程进行管理，而代码工程之间可以通过相应的工具简单的进行代码共享。而传统仓库管理模式则是通过建立多个仓库，每个仓库包含拆分好的代码工程，而仓库间的调用共享则是通过 NPM 或者其他代码引用的方式进行。

🌰🌰🌰 举个例子：

通常我们多个项目的结构如下：

// Repository - project1
├── node_modules/
├── package.json
├── src/
│   ├── views/
│   ├── router/
|   ├── ...
├── README.md
// Repository - project2
├── node_modules/
├── package.json
├── src/
│   ├── views/
│   ├── router/
|   ├── ...
├── README.md

如果有公共用到的东西，会通过 npm 发包更新后，两个项目再安装更新，实现公用。这样发包很麻烦。

可能有 jym 问了：

我直接都放到一个项目下不行吗？

├── package.json
├── src/
│   ├── views/
|   |   ├── project1/
|   |   ├── project2/
│   ├── router/
|   |   ├── project1/
|   |   ├── project2/
|   ├── ...
│   └── lib/
└── README.md

当然可以，但是更多时候两个项目杂糅在一起，代码容易造成混乱，并且项目要一同部署，没有做到解耦。

那 Monorepo 会是怎样的展现？示例如下：

// Repository - monorepo
├── node_modules/
├── package.json
├── packages/
│   ├── pacakge1/
|   |   ├── src/
|   |   ├── README.md
|   |   ├── node_modules/
|   |   ├── pacakge.json
│   ├── package2/
|   |   ├── src/
|   |   ├── README.md
|   |   ├── node_modules/
|   |   ├── pacakge.json
│   └── lib/
|   |   ├── src/
|   |   ├── README.md
|   |   ├── node_modules/
|   |   ├── pacakge.json
├── README.md
├── pnpm-workspace.yaml

代码共享只需要在 package.json 添加包名，然后再到项目中各自引用即可，无需再发 npm 包。

Monorepo 和 pnpm 结合使用，pnpm 由于 symlink 和 hard link 机制，既极大的缩小了安装包的体积，同时也解决了幽灵依赖的问题，前一篇文章提到过，有兴趣可以去看一看。

未来包管理 = Monorepo + pnpm

🤫Where

有没有权威一点的学习地址？

答：

英文：danluu.com/monorepo/

中文：刘留-知乎专栏 尤雨溪也关注了~

🙄When

Monorepo 什么时候诞生？

答：Monorepo 概念提出虽然已经有很长的历史，但随着技术的更新迭代，以及各项工具链的完善，最近几年它逐渐开始成为一个热门的话题。

其实很多技术都是这样，很久前就被提出来了，但是真正被广泛使用，又是另外一回事，或许将来某一个时候赖于某个环境的变化、或者技术生态的发展等等，意外就又爆火了，如果没有，则慢慢走向湮灭了。

😄Who

都有谁在用？

答：很多大型的互联网公司都在采取这样的代码管理策略，比如 Google、Facebook、Uber、MicroSoft 等。也有很多著名的前端开源库选择用这种方式来构建和管理自己的代码，比如Vue、React、Vite、Babel、Element-plus等。

😁How

怎么使用？

答：目前有挺多方式可以搭建 monorepo

• yarn workspaces：Yarn提供的monorepo的依赖管理机制
• lerna：一个开源的管理工具，用于管理包含多个软件包（package）的JavaScript 项目

更多可见 lernajs 官网

小结：本文对 Monorepo 有了一个基础的了解，Monorepo 和 pnpm 搭配，能发挥更大的潜力。