前端工程化之多個項目如何同時高效管理 — 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邀請）入羣，在線解答討論數據可視化、優化圖表性能等方面的技術問題~