lerna管理前端模組實踐

暖風叔叔發表於2020-10-20
前端

最近在工作中使用了 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",
    "dependencies": {
        "module-2": "^1.0.0"
    }
}

//module-2 package.json
{
"name": "module-2",
"version": "1.0.0",
}

在這樣的環境下，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工程

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

  1. 建立一個空的資料夾，命名為 lerna-demo
mkdir lerna-demo
  1. 初始化
cd lerna-demo
lerna init

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

- packages(目錄)
 - lerna.json(配置檔案)
 - package.json(工程描述檔案)
  1. 新增一個測試package

預設情況下，package是放在 packages 目錄下的。

// 進入packages目錄
cd 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 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/iNuanfeng/lerna-demo.git (fetch)
origin  git@github.com/iNuanfeng/lerna-demo.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程式碼

相關文章