前端組件庫一本地開發調試自動化流程

本文轉載自鏈接 https://zhuanlan.zhihu.com/p/142554961

日常運行前端項目的時候整個npm run dev或者類似的命令即可，對於比較大的項目，想要把項目的一些UI或者計算邏輯這種通用邏輯單獨抽成包。
通常的做法是發包到npm,在需要用到的時候安裝，過程如下：
假設我們維護的主應用就叫 big-platform，其中有一些通用邏輯我們給抽象到了一個 Node package 裏，暫且取名 @fudao/hello 併發布到 npm 上，等其他同學開發需要用到這個組件或者邏輯時，一條 npm install @fudao/hello --save 便能搞定
如果組件有BUG，就只能上報bug，等待作者更新，但是作者何時響應就不得而知了，而且麻煩的是上報必須要將現象描述清楚，很多時候還不如自己修改來的快。
修改時，調試複雜：寫代碼都好說，但如何調試往往難倒了很多同學。爲了驗證修改沒有問題再發布，我們的驗證過程成了這期間最耗時的任務。

現有開發調試方案

npm link 手動搬運

每當變更過library上的代碼後，在其所在目錄執行

npm run build // 執行構建
cd dist/hello // 進入構建後結果目錄
npm link // 將library鏈接到全局

然後到項目所在目錄重新綁定並重啓服務

npm link @zujian/hello
npm run start // 對應到具體執行腳本

上述方式的缺點也很明顯，就是每次依賴更新都需重新執行library,在項目中更新依賴

將具體包名替換爲本地路徑

1. 複製構建後文件夾到項目 node_modules 目錄

cp -r dist/hello / /project/node_modules/@zujian/hello

2. 在項目中安裝依賴時使用文件路徑安裝

{  
"name": "big-platform",  
"dependencies":{ "@fudao/hello":"file:../hello/dist/hello" }
}

但一定記着，上線之前你需要把這個依賴改回去，這還是不怎麼方便啊。此外，這兩種方式都需要你在 library 代碼變更後先執行一次包的構建命令，畢竟，要先得到最近的構建包。

源碼引用

如果是 React 或者 Vue 項目，將 library 聲明爲一個 ES Module 並列好入口文件，那麼直接更改項目中 import 方式（從包名改爲路徑形式）或是直接拷貝未構建代碼均可達到調試的效果。如果是 Angular 項目，你可以在 tsconfig.json 中指定 library 的路徑映射（直接引入），但 Angular library 在項目中的使用，用源碼引入和實際構建後引入這兩種方式仍然存在一些差異，所以這麼來看，也還是不太方便

本地 library 開發調試的自動化流程

文件監控開源庫 nodemon

nodemon 是一個用來監視 Node.js 應用程序中文件更改並自動重啓服務的開源庫，僅用於開發環境（推薦）。
使用上不需要對項目代碼做任何操作，命令也只是簡單將 node 替換爲 nodemon，你可以用如下命令安裝它：

npm i -g nodemon

然後配置一下自定義參數，比如觀察的文件類型（是隻觀察.ts文件還是HTML/CSS/TypeScript 的文件變更都需要被監控）、需要觀察的文件路徑、需要忽略的路徑（比如node_modules）以及自定義命令等。

雖然 nodemon 被設計用來監控重啓 Node 應用，但是也支持監控執行自定義命令，比如通過如下命令使用 nodemon 來監控代碼變更：

nodemon    
--ignore dist/ # 忽略目錄  
--ignore node_modules/ 
--watch projects # 觀察目錄    
-C # 只在變更後執行，首次啓動不執行命令    
-e ts,html,less,scss # 監控指定後綴名的文件
--debug # 調試    
-x "npm run build && cd dist/hello && yalc push" # 自定義命令

你還可以通過 nodemon -h 瞭解更多

本地依賴管理開源庫 yalc

yalc 是一個類似於本地化 npm 的解決方案，它在本地環境中創建了一個共享的 library 存儲庫，使得你在需要使用本地依賴時可以快速從這個存儲庫拉取資源進行消費。當在指定 library 中運行 yalc publish 時，它會將本來發布到 npm 上的相關文件存儲在本地這個共享的全局存儲中，而在項目中通過 yalc 添加依賴時， yalc add @zujian/hello 會從全局存儲拉入信息到項目根目錄的 .yalc 文件夾，並將一個文件 “file:.yalc/@zujian/hello” 注入 package.json。
yalc 比較誘人的一點在於他還有一個命令叫 yalc publish --push 或者簡稱 yalc push，他會將你的依賴發佈到本地存儲庫（更新狀態），並將所有更改傳播到現有通過 yalc安裝的依賴中，這個操作實際上進行了一次 update 操作
如此一來，你可以完全按照 npm install 從遠程 registry 拉取依賴的方式安裝和消費一個本地依賴，Cool。

自動化方案

圖中綠色部分皆爲可自動化執行的流程，即我們只需要關注兩個框內的代碼更改，黃框對應 library 代碼，藍框對應項目代碼，其他流程均在代碼變更時自動觸發並最終將變更產物刷新到瀏覽器中。
總結一下，我們的定義了一些 Make 腳本和 npm 腳本用於執行具體構建、推送和調試命令，我們用 nodemon 對 library 側文件變更進行監控，並用 yalc 作爲本地發佈和推送更新的工具，最後 webpack 是本地調試熱更新服務器的實現基礎。
假設你採用yalc + nodemon 方案，那麼在 library 項目中，你可以通過如下 Makefile 指定幾個命令：

init: # 初始化環境
    npm install
    npm install -g yalc nodemon

push: # 手動構建與 push
    npm run build
    cd dist/hello && yalc push

watch: # 自動監聽文件變化並執行構建與 push 任務
    nodemon --ignore dist/ --ignore node_modules/ --watch projects -C -e ts,html,less,scss --debug -x 
"npm run build && cd dist/hello && yalc push"

而在業務項目中，若是你不喜歡 Makefile，可以直接在 package.json 中指定幾個 commands，這樣你就可以直接 npm run * 一把梭了:

{
    
"name":"big-platform",  
"version": "0.0.1",    
"scripts": {        
	"ng": "ng",        
	"start": "ng serve",        
	"build": "ng build --base-href /big-platform/",       
	"test": "ng test",        
	"lint": "ng lint",        
	"e2e": "ng e2e",        
	"init": "npm install && npm install -g yalc",        
	"link-hello": "yalc add @fudao/hello",        
	"remove-hello":"yalc remove --all",        
	...   
	},
...
}

總結

拋去具體實現方案，總結來看，我們的自動化開發調試流程也可以抽象爲兩個通用部分：

本地開發調試階段

在 library 側，進入 library 所在目錄啓動監聽器（nodemon），並附上 watch 變化後重新構建和推送新包的腳本命令（Makefile）；

在項目側，註冊對本地 library 的依賴並安裝（yalc add @package），並啓動本地開發服務（webpack-dev-server），負責調試服務和熱更新等內容；

在發佈流程前

在 library 側，關閉監聽器並編譯打包（npm run build），發佈新版本至 npm；
在項目側，移除對本地 library 依賴的聲明（yalc remove --all），並構建打包、上線。實際幹活時，一條命令自動化整個本地開發調試過程。改造下來，開發流程順暢了不少，感覺還不錯。