lerna管理前端模塊最佳實踐

最近在工做中使用了lerna 進行前端包的管理，效率提高了不少。因此打算總結一下最近幾個月使用lerna的一些心得。有那些不足的地方，請包涵。javascript

該篇文章主要包括在使用lerna的一些注意事項，和使用過程當中與其餘工具的整合，最終造成的一個最佳實踐。前端

package的指的是一個能夠經過npm包管理工具發佈的一種目錄結構，翻譯過來感受不太適合，因此就用package來講明吧。java

前端開發package面臨的問題

在最初開開發package的時候，還屬於一種刀耕火種的階段。沒有什麼自動化的工具。發佈package的時候，都是手動修改版本號。若是packages數量很少還能夠接受。可是當數量逐漸增多的時候，且這些packages之間還有依賴關係的時候，對開發人員來講，就很痛苦了。工做不只繁瑣，並且須要用掉很多時間。git

舉個例子，若是你要維護兩個package。分別爲module-1,module-2。下面是這兩個package的依賴關係。github

// module-1 package.json
{

    "name": "module-1",

    "version": "1.0.0",

    "dependencies": {

        "module-2": "^1.0.0"

    }

}
複製代碼

//module-2 package.json
{

"name": "module-2",

"version": "1.0.0",

}
複製代碼

在這樣的環境下，module-1是依賴module-2的。若是module-2有修改，須要發佈。那麼你的工做有這些。npm

修改module-2版本號，發佈。
修改module-1的依賴關係，修改module-1的版本號，發佈。

這還僅僅只有兩個package,若是依賴關係更復雜，你們能夠想一想發佈的工做量有多大。json

什麼是lerna?爲何要使用lerna?

lerna究竟是什麼呢？lerna官網上是這樣描述的。bootstrap

A tool for managing JavaScript projects with multiple packages.bash

這個介紹能夠說很清晰了，引入lerna後，上面提到的問題不只迎刃而解，更爲開發人員提供了一種管理多packages javascript項目的方式。服務器

自動解決packages之間的依賴關係
經過git 檢測文件改動，自動發佈
根據git 提交記錄，自動生成CHANGELOG

使用lerna的基本工做流

環境配置

Git 在一個lerna工程裏，是經過git來進行代碼管理的。因此你首先要確保本地有正確的git環境。若是須要多人協做開發，請先建立正確的git中心倉庫的連接。所以須要你瞭解基本的git操做，在此再也不贅述。
npm倉庫不管你管理的package是要發佈到官網仍是公司的私有服務器上，都須要正確的倉庫地址和用戶名。你可運行下方的命令來檢查，本地的npm registry地址是否正確。

npm config ls
複製代碼

lerna 你須要全局安裝lerna工具。

npm install lerna -g
複製代碼

初始化一個lerna工程

在這個例子中，我將在我本地d:/ 根目錄下初始化一個lerna工程。

在d:/ 下建立一個空的文件夾，命名爲lerna-demo

mkdir lerna-demo
複製代碼

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

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

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

添加一個測試package

默認狀況下，package是放在packages目錄下的。

// 進入packages目錄
cd d:/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依賴這一步操做，官網上是這樣描述的。

Bootstrap the packages in the current Lerna repo. Installs all of their dependencies and links any cross-dependencies.

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:LittleBreak/lerna-best-practices.git (fetch)
origin  git@github.com:LittleBreak/lerna-best-practices.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是規範的，代碼是規範的，一切都是有跡可循的。這點我認爲是很是重要的。 github代碼

工具整合

在這裏引入的工具都是爲了解決一個問題，就是工程和代碼的規範問題。

husky
lint-staged
prettier
eslint