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項目的方式。 1、自動解決packages之間的依賴關係。 2、經過git 檢測文件改動，自動發佈。 3、根據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工程。一、在d:/jobs下建立一個空的文件夾，命名爲lerna-demo

$ mkdir lerna-demo
複製代碼

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

$ cd d:/jobs/lerna-demo
$ lerna init
複製代碼

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

- packages(目錄)
- lerna.json(配置文件)
- package.json(工程描述文件)
複製代碼

三、添加一個測試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
複製代碼

四、安裝各packages依賴 這一步操做，官網上是這樣描述的 在當前的Lerna倉庫中引導包。安裝全部依賴項並連接任何交叉依賴項。

$ cd d:/lerna-demo
$ lerna bootstrap
複製代碼

在如今的測試package中，module-1是沒有任何依賴的，所以爲了更加接近真實狀況。你可已在module-1的package.json文件中添加一些第三方庫的依賴。 這樣的話，當你執行完該條命令後，你會發現module-1的依賴已經安裝上了。

五、發佈 在發佈的時候，就須要git工具的配合了。 因此在發佈以前，請確認此時該lerna工程是否已經鏈接到git的遠程倉庫。你能夠執行下面的命令進行查看

git remote -v
// print log
origin  git@github.com:meitianyitan/docm.git (fetch)
origin  git@github.com: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的話會報錯

寫在最後 歡迎加我wx wangchen20180818 交流，學習