前端工程化之多个项目如何同时高效管理 — monorepo

monorepo 不只限于前端，但此篇博文只谈前端。

是什么

wikipedia: In version control systems, a monorepo ("mono" meaning 'single' and "repo" being short for 'repository') is a software development strategy where code for many projects is stored in the same repository.

翻译过来就是：在版本控制系统中，monorepo 是一种软件开发策略，其中许多项目的代码存储在同一存储库中。

为何

在公司内，若是项目较多，每个项目都会有一个Git仓库，就会致使新来的员工每一次更改项目的时候都须要从 Git 仓库上面拉一份代码下来比较麻烦。

那若是将全部的项目放在一个仓库一块儿管理呢？这就是 monorepo。

优势

1. 对依赖统一进行管理。
2. 能够抽取逻辑维护公共库。
3. 全部项目统一配置相同的工程配置。

缺点

1. 须要有比较严格的 CR 规范。
2. Git 权限管理难以控制。
3. 版本控制比较麻烦

项目都须要规范的流程。

怎么作

目前来讲，前端算是有两种比较常见的对 monorepo 的方案：

1. lerna.js
2. yarn workspace

固然，它们也能够同时使用。

yarn workspaces

它容许设置多个包，即只需运行一次 yarn 安装便可一次性安装全部包。

在package.json文件中添加如下内容

{
  "private": true,
  "workspaces": ["workspace-a", "workspace-b"]
}
复制代码

禁止使用

在 .yarnrc 文件中添加：

workspaces-experimental false
复制代码

learn.js

Github 仓库在：github.com/lerna/lerna

Lerna is a tool that optimizes the workflow around managing multi-package repositories with git and npm.

Lerna 是一个使用 git 和 npm 优化管理多包存储库的工做流程的工具。

须要注意的是：lerna 只是一个优化工做流程的工具，并非一个部署工具。

安装

# 新建一个项目
mkdir lerna-demo && cd lerna-demo

# 初始化项目
npm init -y

# 安装 lerna
yarn add lerna -D

# 初始化 lerna 的项目
npx lerna init
复制代码

此时一个最基本的 lerna 项目算是完成了。

(记得添加 .gitignore )

使用

上述的命令完成以后，如今项目的文件目录：

更改一下 package.json 在其中加一个字段：

{
  "private": true,
  // ...
}
复制代码

因为咱们管理的是子项目，通常不对父项目进行发布处理，因此将 private 设置为 true。

而后在 packages 目录中新建项目便可。

lerna 会自动检测到 packages 里面的项目进行管理。

packages 目录中的项目须要注意一件事情：

• package.json 的 name 字段须要和文件夹的名称相同。

命令

• lerna init: 初始化
• learn list: 列出如今管理的项目
• lerna diff: 列出最近一次 release 的区别
• lerna change: 更改了哪些 package
• lerna bootstrap: 安装依赖而且连接任何交叉依赖项
• lerna clean: 清理全部依赖项
• lerna exec: 在每一个 package 执行命令
• lerna run: 在包含 npm script 中的每一个 package 执行 npm script
• lerna import: 将 package 导入到具备提交历史记录的 monorepo 中
• lerna link: 将相互依赖的全部 package 符号连接在一块儿

同时使用

lerna 和 yarn workspace 能够同时使用

在 lerna.json 添加：

{
  "packages": [
    "packages/*"
  ],
  "version": "0.0.0",
  "npmClient": "yarn",
  "useWorkspaces": true
}
复制代码

而后在 package.json 添加：

{
  // ...
  "private": true,
  "workspaces": [
    "packages/*"
  ]
}
复制代码

区别

在 yarn workspace 中有这么一段：

Yarn’s workspaces are the low-level primitives that tools like Lerna can (and do!) use. They will never try to support the high-level feature that Lerna offers, but by implementing the core logic of the resolution and linking steps inside Yarn itself we hope to enable new usages and improve performance.

这个就是区别

参考

wikipedia Monorepo: en.wikipedia.org/wiki/Monore…

yarn workspace: classic.yarnpkg.com/en/docs/wor…

lerna github: github.com/lerna/lerna

PS:你们看了后以为对本身有帮助能够三连留言,欢迎提出宝贵意见，也欢迎各位对相关技术有兴趣的开发者（由团队开发人员微信号x118422邀请）入群，在线解答讨论数据可视化、优化图表性能等方面的技术问题~