優維低程式碼：解析構件開發 Step by Step

低程式碼是優維科技長期深耕的技術板塊，在漫長的創業週期中，我們透過不斷實踐積累和迭代最佳化，沉澱出EasyMABuilder前端低程式碼平臺，迄今已成功賦能大量優質使用者，為多個行業帶來前所未有的輕盈體驗。

EasyMABuilder成功的背後，是優維人數年的技術探索和EasyOps產品哲學的落地，蘊含了主創團隊對低程式碼生態的深度思考和實踐創新。

我們特別推出低程式碼專題撰稿計劃，以專欄系列文章的形式解構低程式碼在DevOps領域的技術表現。

上一篇文章，我們講述了在 EasyMABuilder 中如何透過表示式和微應用函式來進行資料處理，讓低程式碼平臺也獲得了與專業程式碼媲美的編寫程式碼的能力和體驗，不過這些程式碼僅限於資料加工，它無法參與 UI 介面相關的工作，雖然 EasyMABuilder 提供了數百個開箱即用的構件，並提供了在微應用層面封裝模板的能力，但對於 UI 介面，總有更個性化的場景和需求，對此，我們提供了使用者編寫新構件的能力，並提供配套的腳手架工具來方便使用者更快捷的編寫新構件。

01

準備

開始前，我們需要準備本地開發環境。

NodeJS

（>=14）；

Yarn

（1。x），安裝方式：執行

npm install -g yarn

；

Lerna

，安裝方式：執行

npm install -g lerna

。

02

建立一個新的構件專案

開發者可以按需建立自己的構件專案，每個專案中可以包含多個構件包，每個構件包又可以定義多個構件。

使用優維官方提供的 CLI 工具即可一鍵生成新的構件專案：

這個新生成的專案已經初始化提供了構建、測試、打包、程式碼靜態檢查等現代化的前端工程化配置，如果我們將專案託管在 GitHub 上，還可以開箱即用地使用包括持續整合和依賴更新等在內的自動化工作流。

03

建立一個新的構件包

初始化的專案還沒有任何構件包，我們先使用專案中內建的腳手架工具建立一個：

執行

yarn yo

；

選擇

a new package of bricks

；

輸入構件包的名稱，例如

my-bricks

；

然後，我們可以選擇同時建立一個構件，本文為了演示我們先選擇跳過。

新的構件包的程式碼就已經初始化完成，其中的各種工程配置檔案可以按需自由調整。

04

建立一個新構件

構件包有了，我們再建立一個新的構件：

執行

yarn yo

；

選擇

a new brick

；

輸入構件的名稱，例如

hello-world

。

05

編寫構件

初始化的構件主要包含以下檔案：

這個構件已經可以使用，我們先啟動開發版本的構建：

然後開啟一個新的終端來啟動開發服務：

接著就可以在我們的微應用中使用該構件了：

不過這個構件還只是一個空殼，我們接下來完善它。假設我們的需求是做一個按鈕構件，簡單做下修改：

儲存後，本地頁面將立即更新：

06

屬性

我們再讓構件支援一個“按鈕型別”的屬性：

最後修改我們的應用編排，設定一個按鈕型別：

07

事件

我們再為它新增一個點選事件：

最後修改我們的應用編排，繫結一個按鈕事件：

點選該按鈕，將彈出提示資訊：

至此，我們完成了基本的構件能力的開發。