程式碼片段plus ??? 打工神器: 飛冰物料庫
為什麼使用飛冰物料庫
日常開發中，前端的邏輯、樣式和互動都有共同點。為了這些相同的邏輯、相同的互動，相同的樣式規範，我們已經有了樣式元件庫，業務元件庫和antd的樣式主題包。
雖然目前已有的元件庫和主題包已經幫助我們節省了不少的時間，大大提升了我們的開發效率。
但目前已有的庫或者包，所對應的僅僅是一個元件、一個樣式。對於一整個相同或者相似的公共互動頁面，我們目前的方法仍還是進行ctrl c + ctrl v。
對此，我一直在思考是否有更加簡潔、高效的辦法，經過對飛冰物料庫進行調研，發現是一個不錯的實現方式。
什麼是飛冰物料庫
我們首先要知道，飛冰不等於飛冰物料庫，飛冰是一個基於 React 的研發解決方案，包含多種功能，物料庫只是其中一部分。
物料分為元件、區塊、專案三種類型：
元件：我們日常使用的元件，如Doraemon；
區塊：一般是一個UI模組，使用區塊時會將區塊程式碼通過新建component的形式以元件的形式拷貝到專案程式碼中，我們可以進一步的對區塊程式碼進行任何改動；
專案模板：專案腳手架，用於專案初始化。
因為我們的需求，目前只考慮區塊。
使用物料庫
外掛安裝
開啟 VS Code，確定已經安裝了 AppWorks 外掛集合 (opens new window)
一個擴充套件包，提供了多個功能，如程式碼補全、程式碼資訊提示和程式碼重構以及我們關心的物料庫使用。
視覺化開發
AppWorks 提供了海量的物料的來提升我們的日常開發效率。我們可以使用模板快速建立專案；可以使用物料面板，將一些物料新增到當前開發的專案中。
豐富的物料資源
當然，如果已經有的物料不能滿足我們的需求，AppWorks 還提供了開發自己物料的一整套流程，我們完全可以打造屬於自己的物料庫。並且因為很多公司會搭建私有的 npm，因此如果需要建設私有化的物料，其還貼心提供了相應的解決方案。
# 物料開發
開發前，先全域性安裝CLI
``` npm install @appworks/cli -g
檢查是否安裝成功
appworks -V
V 大寫
```
初始化專案
新建一個專案執行
```
建立自己的專案目錄並進入到對應目錄
mkdir my-material && cd my-material
執行腳手架
appworks init ```
執行腳手架指令
根據需求，在執行腳手架的時候，型別選擇，我們選擇帶區塊的,其他選項，根據個人需要自定義即可。
腳手架生成專案結構
目錄結構
通過結構檢視，我們發現其內建了一個demo供我們開發參考，所以我們可以根據提示，先安裝整個專案依賴，安裝完成後，再進入到區塊，安裝區塊的依賴，然後進行demo檢視。
```
安裝全域性依賴
npm install
安裝區塊依賴，並執行
cd blocks/ExampleBlock
npm install
npm start ```
執行start結果
物料區塊開發
我們新加一個JiangNiaoTest區塊，我們在專案根目錄執行
``` appworks add
或者
appworks add block ```
接下來的操作，我們僅僅需要按照平時開發程式碼一樣，寫自己的程式碼就可以了（如何產出優雅高效的區塊，這裡還需要討論和實踐，不做過多闡述）。程式碼開發完成後，我們需要對npm進行釋出。
物料資料生成
將每個區塊搞定之後，我們只需要返回到專案根目錄，執行
appworks generate
馬上，你會在build目錄下看到materials.json檔案，開啟檔案，將會發現，這個檔案描述了剛開發的整個物料集合。
物料資料釋出與使用
在進行物料資料釋出之前，我們需要先註冊自己的物料站點,該站點需要我們用淘寶賬號註冊。
成功後
物料中心
物料站點
建立成功後記錄自己的token，用於釋出物料
個人物料資源
站點註冊完成後，我們就可以在專案根目錄執行appworks sync，
在這裡，它會讓你輸入你剛剛生成的站點token，token正確後，就會出現自己設定的站定名字
上傳成功後，會得到一個連結
我們拿到這個連結，在前面提到的Appworks的vscode外掛中
使用自己的物料
一系列操作之後，大功告成，可以使用了。
注意：我們這裡配置的區塊，而直接開啟Appworks只能看見模板，所以我們在jsx/tsx等檔案下右鍵才能看到我們的區塊
私有化部署
對於私有化部署，官網給出了一種解決方案：使用unpkg服務。
我們僅僅需要設定appworks的配置即可
全域性配置
```
設定npm地址
appworks config set registry https://registry.xxx.com
設定unpkg地址
appworks config set unpkgHost https://unpkg.xxx.com
確認是否生效
appworks config list ```
專案級配置
開發物料集合的場景，也可以在專案級配置該欄位，只需要配置根目錄 package.json 的 materialConfig 欄位即可：
``` {
"materialConfig": {
"type": "react",
"registry": "https://registry.xxx.com",
"unpkgHost": "https://unpkg.xxx.com"
}
} ```
如此配置之後，在當前物料源專案執行 appworks 相關命令會使用該欄位。
私有化資料託管
對於私有化，物料中心是無法使用的，需要我們自己將前文說到的build目錄下看到materials.json檔案以npm的形式，上傳到內部的npm包環境下，並通過unpkg的形式拿到靜態資源，在將改地址複製到Appworks下即可使用。
私有化也大功告成。
寫在最後
在現有程式碼進行開發抽離的時候，我們對於現有的
公共型別定義types、公共變數、公共元件
之類的東西，需要注意，需要進行合理的處理，不然將會出現程式碼冗餘，這樣將會喪失物料庫的意義，這裡，還需要好好想一下。
如果有什麼疑問，歡迎評論區！！！
感謝看到這裡！！！
參考資源：