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的話會報錯