lerna管理前端packages的最佳實踐

破曉前發表於2018-03-02
前端Package

最近在工作中使用了lerna 進行前端包的管理，效率提升了很多。所以打算總結一下最近幾個月使用lerna的一些心得。有那些不足的地方，請包涵。

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

package的指的是一個可以通過npm包管理工具釋出的一種目錄結構，翻譯過來感覺不太適合，所以就用package來說明吧。

前端開發package面臨的問題

在最初開開發package的時候，還屬於一種刀耕火種的階段。沒有什麼自動化的工具。釋出package的時候，都是手動修改版本號。如果packages數量不多還可以接受。但是當數量逐漸增多的時候，且這些packages之間還有依賴關係的時候，對開發人員來說，就很痛苦了。工作不僅繁瑣，而且需要用掉不少時間。

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

/////////module-1   package.json
{

"name": "module-1",

"version": "1.0.0",

"description": "",

"main": "index.js",

"scripts": {

"test": "echo \\"Error: no test specified\\" && exit 1"

},

"keywords": \[\],

"author": "",

"license": "ISC",

"dependencies": {

"module-2": "^1.0.0"

}

}
複製程式碼
///// module-2  package.json
{

"name": "module-2",

"version": "1.0.0",

"description": "",

"main": "index.js",

"scripts": {

"test": "echo \\"Error: no test specified\\" && exit 1"

},

"keywords": \[\],

"author": "",

"license": "ISC"

}
複製程式碼

在這樣的環境下，module-1是依賴module-2的。如果module-2有修改，需要釋出。那麼你的工作有這些。

  1. 修改module-2版本號，釋出。
  2. 修改module-1的依賴關係，修改module-1的版本號，釋出。

這還僅僅只有兩個package,如果依賴關係更復雜，大家可以想想釋出的工作量有多大。

什麼是lerna?為什麼要使用lerna?

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

A tool for managing JavaScript projects with multiple packages.

這個介紹可以說很清晰了，引入lerna後，上面提到的問題不僅迎刃而解，更為開發人員提供了一種管理多packages javascript專案的方式。

  1. 自動解決packages之間的依賴關係
  2. 通過git 檢測檔案改動，自動釋出
  3. 根據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工程。

  1. 在d:/ 下建立一個空的資料夾，命名為lerna-demo
mkdir lerna-demo
複製程式碼
  1. 初始化 通過cmd進入相關目錄，進行初始化
cd d:/lerna-demo
lerna init
複製程式碼

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

 - packages(目錄)
 - lerna.json(配置檔案)
 - package.json(工程描述檔案)
複製程式碼
  1. 新增一個測試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

複製程式碼
  1. 安裝各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的依賴已經安裝上了。

  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 的經驗，總結出一個最佳實踐。下面是一些特性。

  1. 採用Independent模式
  2. 根據Git提交資訊，自動生成changelog
  3. eslint規則檢查
  4. prettier自動格式化程式碼
  5. 提交程式碼，程式碼檢查hook
  6. 遵循semver版本規範

大家應該也可以看出來，在開發這種工程的過程的，最為重要的一點就是規範。因為應用場景各種各樣，你必須保證釋出的packge是規範的，程式碼是規範的，一切都是有跡可循的。這點我認為是非常重要的。 github程式碼

工具整合

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

  • husky
  • lint-staged
  • prettier
  • eslint

相關文章