lerna.js學習總結


lerna.js學習總結

(當然,本文涉及到的知識點不限於lernajs,涉及到nodejs,npm,vue,vue cli,相關知識點需要了解一些閱讀起來更方便)

 

Lerna是一種工具,可以優化使用git和npm管理多包存儲庫的工作流程。   github地址    lerna文檔地址

 

①安裝lerna

npm install --global lerna

安裝成功如下所示(建議全局安裝lerna)

 

 ②初始化git倉庫

git init lerna-repo

 

未完待續。。。(為了更直觀的展示項目文件結構變化,計划使用 tree 命令生成目錄結構文件以方便展示,無奈windows 默認沒有)

    

 續集 (不好意思,我弄錯了,windows 下也有tree命令,我之前是在git base 下試的tree命令找不到,然而事實是windows自帶的dos下是有tree命令的,我們愉快的開始吧)

 

③主項目npm初始化

現在空白倉庫的目錄結構

 

執行npm初始化創建package.json文件

npm init

結構如下

 

④創建lerna倉庫

 切換到git倉庫目錄,創建一個新的lerna倉庫或將現有的倉庫升級到Lerna的當前版本,請執行初始化命令

lerna init -i

 初始化后項目下添加 packages空目錄,添加 lerna.json 文件 ,修改package.json添加 lerna 開發依賴

 

 以上介紹了 lerna 初始化項目過程中文件目錄結構的變化(以上文件內容變化均由命令修改的,非手工修改),讓我們大致了解初始化做的事情,現在,讓我們通過使用vue cli的方式來繼續項目吧(vue cli 只是我自己用來創建子包項目,和lerna無關,使用任何工具創建子包項目或者不適用工具創建均可)

 

 ⑤創建我們的包項目

切換到packages目錄下,使用vue-cli創建我們的包項目 (vue cli 需要自己單獨安裝)

vue create package-test

 

 vue cli 初始化后創建的目錄文件如下

 

⑥,在當前的lerna存儲庫中引導軟件包

注意,使用vue cli 創建創建了包目錄后,需要使用 lerna bootstrap 命令將包信息存儲到lerna中(或者說關聯起來)

lerna bootstrap

 

 從上圖可見,在使用lerna bootstrap 命令關聯包之前,lerna ls 找不到關聯的子包。使用lerna bootstrap 后,現在lerna現在已經可以發現我們建立的包文件啦

 

為了驗證在packages包目錄外面,也能使用我們包里面的組件,我們將主項目結構也是用vue cli 生成的文件替換主目錄結構如下

 

 

 現在主目錄也是vue cli 項目結構啦

 啟動主項目 (注意,以下命令是運行的是vue cli 默認配置的啟動命令)

npm run serve

默認啟動界面如下圖所示(這個是vue cli 創建項目默認初始化頁面)

 

修改 package-test 包入口文件地址為我們的組件入口地址

 

 在主項目App.vue 引入我們的組件包文件 (注意,以下我們是按照相對目錄引入的我們得包組件,等到組件被發布后,我們可以切換為npm上發布的包名)

 

 組件包代碼如下

 

 現在我們主項目啟動后,頁面如下

 可以看到頁面現在已經顯示了我們的包組件代碼內容。

現在嘗試發布我們的組件包吧(注意,lerna 僅輔助我們發布流程,npm賬號任然需要我們自己注冊並登錄,否則npm發布失敗,只會在當前項目生成tag並提交代碼)

 

 

 

 

@萍2櫻釋ღ( ´・ᴗ・` )


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM