程式碼片段plus ??? 打工神器: 飛冰物料庫

語言: CN / TW / HK

為什麼使用飛冰物料庫

日常開發中,前端的邏輯、樣式和互動都有共同點。為了這些相同的邏輯、相同的互動,相同的樣式規範,我們已經有了樣式元件庫,業務元件庫和antd的樣式主題包。

雖然目前已有的元件庫和主題包已經幫助我們節省了不少的時間,大大提升了我們的開發效率。

但目前已有的庫或者包,所對應的僅僅是一個元件、一個樣式。對於一整個相同或者相似的公共互動頁面,我們目前的方法仍還是進行ctrl c + ctrl v

對此,我一直在思考是否有更加簡潔、高效的辦法,經過對飛冰物料庫進行調研,發現是一個不錯的實現方式。

飛書20220522-172455.jpg

什麼是飛冰物料庫

我們首先要知道,飛冰不等於飛冰物料庫,飛冰是一個基於 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 相關命令會使用該欄位。

8e7797af-a3fc-4961-9a88-4a67ef99c65g.gif

私有化資料託管

對於私有化,物料中心是無法使用的,需要我們自己將前文說到的build目錄下看到materials.json檔案以npm的形式,上傳到內部的npm包環境下,並通過unpkg的形式拿到靜態資源,在將改地址複製到Appworks下即可使用。

私有化也大功告成。

寫在最後

在現有程式碼進行開發抽離的時候,我們對於現有的

公共型別定義types、公共變數、公共元件

之類的東西,需要注意,需要進行合理的處理,不然將會出現程式碼冗餘,這樣將會喪失物料庫的意義,這裡,還需要好好想一下。

如果有什麼疑問,歡迎評論區!!!

感謝看到這裡!!!

97fc0ffcee6c80701b361ff8b7a8cbe3.gif


參考資源:

飛冰官網

AppWorks介紹

物料資訊

React物料