lerna管理前端packages的最佳實踐

背景

對于維護過多個package的同學來說，都會遇到一個選擇：這些package是放在一個倉庫里維護還是放在多個倉庫里單獨維護，數量較少的時候，多個倉庫維護不會有太大問題，但是當package數量逐漸增多時，一些問題逐漸暴露出來：

1. package之間相互依賴，開發人員需要在本地手動執行npm link，維護版本號的更替；
2. issue難以統一追蹤，管理，因為其分散在獨立的repo里；
3. 每一個package都包含獨立的node_modules，而且大部分都包含babel,webpack等開發時依賴，安裝耗時冗余并且占用過多空間，

什么是lerna

lerna到底是什么呢？lerna官網上是這樣描述的

用于管理具有多個包的JavaScript專案的工具，
這個介紹可以說很清晰了，引入lerna后，上面提到的問題不僅迎刃而解，更為開發人員提供了一種管理多packages javascript專案的方式，
一、自動解決packages之間的依賴關系，
二、通過git 檢測檔案改動，自動發布，
三、根據git 提交記錄，自動生成CHANGELOG

常用命令

全域安裝lerna

lerna 我們需要全域安裝lerna工具，

$ npm i -g lerna
# 或
$ yarn global add lerna

為所有專案安裝依賴，類似于npm/yarn i

$ lerna bootstrap

提交對專案的更新

運行該命令會執行如下的步驟

1. 運行lerna updated來決定哪一個包需要被publish
2. 如果有必要，將會更新lerna.json中的version
3. 將所有更新過的的包中的package.json的version欄位更新
4. 將所有更新過的包中的依賴更新
5. 為新版本創建一個git commit或tag
6. 將包publish到npm上

$ lerna publish # 用于發布更新
$ lerna publish --skip-git # 不會創建git commit或tag
$ lerna publish --skip-npm # 不會把包publish到npm上

使用lerna 初始化專案

$ lerna init # 固定模式(Fixed mode)默認為固定模式，packages下的所有包共用一個版本號(version)
$ lerna init --independent # 獨立模式(Independent mode)，每一個包有一個獨立的版本號

為packages檔案夾下的package安裝依賴

$ lerna add <package>[@version] [--dev] # 命令簽名
# 例如
$ lerna add module-1 --scope=module-2 # 將 module-1 安裝到 module-2
$ lerna add module-1 --scope=module-2 --dev # 將 module-1 安裝到 module-2 的 devDependencies 下
$ lerna add module-1 # 將 module-1 安裝到除 module-1 以外的所有模塊
$ lerna add babel-core # 將 babel-core 安裝到所有模塊

卸載依賴

$ lerna exec -- <command> [..args] # 在所有包中運行該命令

# 例如
$ lerna exec --scope=npm-list  yarn remove listr # 將 npm-list 包下的 listr 卸載
$ lerna exec -- yarn remove listr # 將所有包下的 listr 卸載

檢查對包是否發生過變更（前提是git代碼已經提交）

$ lerna updated
# 或
$ lerna diff

• 顯示packages下的各個package的name

$ lerna ls

• 清理node_modules

$ lerna clean

lerna run

運行npm script，可以指定具體的package，

$ lerna run <script> -- [..args] # 在所有包下運行指定

# 例如
$ lerna run test # 運行所有包的 test 命令
$ lerna run build # 運行所有包的 build 命令
$ lerna run --parallel watch # 觀看所有包并在更改時發報，流式處理前綴輸出

$ lerna run --scope my-component test # 運行 my-component 模塊下的 test

lerna.json決議

{
  "version": "1.1.3",
  "npmClient": "npm",
  "command": {
    "publish": {
      "ignoreChanges": [
        "ignored-file",
        "*.md"
      ]
    },
    "bootstrap": {
      "ignore": "component-*",
      "npmClientArgs": ["--no-package-lock"]      
    }
  },
  "packages": ["packages/*"]
}

version：當前庫的版本
npmClient： 允許指定命令使用的client， 默認是 npm， 可以設定成 yarn
command.publish.ignoreChanges：可以指定那些目錄或者檔案的變更不會被publish
command.bootstrap.ignore：指定不受 bootstrap 命令影響的包
command.bootstrap.npmClientArgs：指定默認傳給 lerna bootstrap 命令的引數
command.bootstrap.scope：指定那些包會受 lerna bootstrap 命令影響
packages：指定包所在的目錄

環境配置

• Git 在一個lerna工程里，是通過git來進行代碼管理的，所以你首先要確保本地有正確的git環境， 如果需要多人協作開發，請先創建正確的git中心倉庫的鏈接， 因此需要你了解基本的git操作，在此不再贅述，
• npm倉庫 無論你管理的package是要發布到官網還是公司的私有服務器上，都需要正確的倉庫地址和用戶名， 你可運行下方的命令來檢查，本地的npm registry地址是否正確，

$ npm config ls

lerna 我們需要全域安裝lerna工具

$ npm i -g lerna
# 或
$ yarn global add lerna

初始化一個lerna工程

在這個例子中，我將在我本地d:/jobs 根目錄下初始化一個lerna工程，1、在d:/jobs下創建一個空的檔案夾，命名為lerna-demo

$ mkdir lerna-demo

初始化 通過cmd進入相關目錄，進行初始化

$ cd d:/jobs/lerna-demo
$ lerna init

執行成功后，目錄下將會生成這樣的目錄結構，

- packages(目錄)
- lerna.json(組態檔)
- package.json(工程描述檔案)

3、添加一個測驗package
默認情況下，package是放在packages目錄下的，

# 進入packages目錄
cd d:/jobs/lerna-demo/packages
# 創建一個packge目錄
mkdir module-1
# 進入module-1 package目錄
cd module-1
# 初始化一個package
npm init -y

執行完畢，工程下的目錄結構如下:

--packages
	--module-1
		package.json
--lerna.json
--package.json

4、安裝各packages依賴 這一步操作，官網上是這樣描述的
在當前的Lerna倉庫中引導包，安裝所有依賴項并鏈接任何交叉依賴項，

$ cd d:/lerna-demo
$ lerna bootstrap

在現在的測驗package中，module-1是沒有任何依賴的，因此為了更加接近真實情況，你可已在module-1的package.json檔案中添加一些第三方庫的依賴， 這樣的話，當你執行完該條命令后，你會發現module-1的依賴已經安裝上了，

5、發布 在發布的時候，就需要git工具的配合了， 所以在發布之前，請確認此時該lerna工程是否已經連接到git的遠程倉庫，你可以執行下面的命令進行查看

git remote -v
// print log
origin  [email protected]:meitianyitan/docm.git (fetch)
origin  [email protected]:meitianyitan/docm.git (push)

本篇文章的代碼托管在Github上，因此會顯示此遠程鏈接資訊， 如果你還沒有與遠程倉庫鏈接，請首先在github創建一個空的倉庫，然后根據相關提示資訊，進行鏈接，

$ lerna publish

執行這條命令，你就可以根據cmd中的提示，一步步的發布packges了，
實際上在執行該條命令的時候，lerna會做很多的作業，

-  Run the equivalent of  `lerna updated`  to determine which packages need to be published.
-  If necessary, increment the  `version`  key in  `lerna.json`.
-  Update the  `package.json`  of all updated packages to their new versions.
-  Update all dependencies of the updated packages with the new versions, specified with a  [caret (^)](https://docs.npmjs.com/files/package.json#dependencies).
-  Create a new git commit and tag for the new version.
-  Publish updated packages to npm.

到這里為止，就是一個最簡單的lerna的作業流了，但是lerna還有更多的功能等待你去發掘，
lerna有兩種作業模式,Independent mode和Fixed/Locked mode，在這里介紹可能會對初學者造成困擾，但因為實在太重要了，還是有必要提一下的，
lerna的默認模式是Fixed/Locked mode，在這種模式下，實際上lerna是把工程當作一個整體來對待，每次發布packges，都是全量發布，無論是否修改，但是在Independent mode下，lerna會配合Git，檢查檔案變動，只發布有改動的packge，

lerna最佳實踐

為了能夠使lerna發揮最大的作用，根據這段時間使用lerna 的經驗，總結出一個最佳實踐，下面是一些特性，

采用Independent模式
根據Git提交資訊，自動生成changelog
eslint規則檢查
prettier自動格式化代碼
提交代碼，代碼檢查hook
遵循semver版本規范
大家應該也可以看出來，在開發這種工程的程序的，最為重要的一點就是規范，因為應用場景各種各樣，你必須保證發布的packge是規范的，代碼是規范的，一切都是有跡可循的，這點我認為是非常重要的，

bug

lerna 3.16.4中的一個bug

Enter a custom version? 輸入項如果直接enter的話會報錯

查看更多