【擼個前端腳手架】(三)讓lerna去管理腳手架

lerna的作用

【擼個前端腳手架】(二)腳手架的開發流程 中講到對腳手架要進行分包開發,但分包開發的過程中我們會面臨以下一些問題:

 

  • 創建每個包我們都需要添加package.json文件和入口文件,這是一個重複性的工作!
  • 後期對每個包進行更新迭代時,我們從遠程倉庫clone下腳手架項目後,需要切換到每個包下執行npm install去安裝每個包所依賴的npm 模塊,這是一個重複性的工作!
  • 腳手架開發完成後,我們需要將每個包發佈到npm倉庫。我們同樣需要切換到每個包下修改包的版本號,執行npm publish。這是一個重複性的工作!
可能還有一些問題上面沒有列出來,但我們會發現這些問題的共同點就是重複性操作!那麼我們就急需一個包管理工具來解決這些問題。

它就是今天我要向大家介紹的包管理工具:lerna。 

lerna的使用 

完整的lerna api 大家可以訪問 lerna倉庫 學習。這裏帶大家快速上手lerna 

安裝lerna

 

mkdir lerna-demo
cd lerna-demo
npm init -y
npm install -S lerna

對腳手架進行lerna初始化

 

lerna init

 

執行完後我們腳手架項目的目錄結構如下圖所示,項目中多出來一個packages目錄與lerna.json文件。

 

我們需要重點關注點就是lerna.json文件,packages屬性中 "packages/*" 表示 packages目錄下的所有包都受lerna管理。這裏的包指的是packages下的包而不是packages本身,這點大家需要注意。也就是說packages這個目錄本身沒有什麼意義,我們可以隨意修改。

假設我們的腳手架分三大部分:

  • 核心包存放在core目錄
  • 所有命令包存放在commands目錄
  • 所有工具包放在utils目錄

現在對lerna.json文件以及項目目錄結構進行修改:

 

通過lerna創建包

完成腳手架基本目錄結構的搭建,我們正式進入腳手架的開發。

在core目錄下創建cli包負責腳手架的基本業務邏輯;

在commands目錄下創建init包負責腳手架執行init命令時的業務邏輯;

在utils目錄下創建utils包負責常用工具函數的編寫。

通過lerna提供的create指令快速創建 cli、init、utils 包。這裏需要注意兩點:

  • 執行lerna create cli core指令時,cli表示要創建的包名爲cli,core表示包創建在core目錄下。這裏的core必須在lerna.json的packages中有過配置。
  • 執行lerna craete cli core指令後,需要填寫 package name。這裏的package name指的是發佈到npm倉庫的包名。起初我這邊輸入的是 @lerna-demo/cli,但@lerna-demo這個packages前綴在npm倉庫已存在,所以修改成了@tyro-lerna-demo/cli。這裏大家要注意起的包名不要在npm倉庫中已存在。

 

 

將包發佈到npm倉庫

通過 lerna publish 將 cli、init、utils三個包發佈到npm倉庫 

執行lerna publish指令後控制檯提示我們的倉庫沒有發生任何提交變動,我們對本地倉庫執行git commit之後再次執行lerna publish

控制檯錯誤信息提示當前倉庫沒有關聯遠程倉庫,我們在github或其碼雲之類的託管平臺創建遠程倉庫並與當前本地倉庫進行關聯,再次執行lerna publish。

這次沒有報錯,lerna提示我們選擇一個發佈的版本號,這裏我們選擇0.0.1即可。在實際開發中大家根據需要選擇對應的版本號。

選擇完版本號之後這次控制檯又出現了新的錯誤,百度一下錯誤信息發現:當我們的包名包含@前綴時,這個包需要是一個公有包。解決方法是在每個包的package.json文件中添加以下內容:

 

// commands/init package.json
// core/cli package.json
// utils/utils package.json

"publishConfig": {
    "access": "public"
 }

 

重新發布,再次報錯。這次錯誤提示我們沒有在npm倉庫中創建對應的@tyro-lerna-demo package。這裏我們先去npm創建package再來執行lerna publish

經歷過一次又一次的失敗,我們終於成功通過lerna將包發佈到npm倉庫上拉!

補充

  • 我們每次執行lerna publish後不管是否發佈成功,每個包的版本號都會發生變化。就像我們上面那個demo,最開始的版本是0.0.0,結果經歷各種失敗之後版本變成了0.0.3.如果大家希望最後發佈到npm的版本號是0.0.1,我們需要手動將項目中每個包的package.json中的version修改爲0.0.0,,還需要將遠程倉庫中新增的標籤刪掉,否則我們在執行lerna publish時會提示當前版本已存在。

  • lerna爲我們提供了 lerna bootstrap命令安裝所有包的依賴,相當於我們切換到每個包下執行npm install命令安裝依賴。

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章