優(yōu)維低代碼：解析構(gòu)件開發(fā) Step by Step

低代碼是優(yōu)維科技長期深耕的技術(shù)板塊，在漫長的創(chuàng)業(yè)周期中，我們通過不斷實踐積累和迭代優(yōu)化，沉淀出EasyMABuilder前端低代碼平臺，迄今已成功賦能大量優(yōu)質(zhì)用戶，為多個行業(yè)帶來前所未有的輕盈體驗。

EasyMABuilder成功的背后，是優(yōu)維人數(shù)年的技術(shù)探索和EasyOps產(chǎn)品哲學(xué)的落地，蘊(yùn)含了主創(chuàng)團(tuán)隊對低代碼生態(tài)的深度思考和實踐創(chuàng)新。

我們特別推出低代碼專題撰稿計劃，以專欄系列文章的形式解構(gòu)低代碼在DevOps領(lǐng)域的技術(shù)表現(xiàn)。

上一篇文章，我們講述了在 EasyMABuilder 中如何通過表達(dá)式和微應(yīng)用函數(shù)來進(jìn)行數(shù)據(jù)處理，讓低代碼平臺也獲得了與專業(yè)代碼媲美的編寫代碼的能力和體驗，不過這些代碼僅限于數(shù)據(jù)加工，它無法參與 UI 界面相關(guān)的工作，雖然 EasyMABuilder 提供了數(shù)百個開箱即用的構(gòu)件，并提供了在微應(yīng)用層面封裝模板的能力，但對于 UI 界面，總有更個性化的場景和需求，對此，我們提供了用戶編寫新構(gòu)件的能力，并提供配套的腳手架工具來方便用戶更快捷的編寫新構(gòu)件。

01 準(zhǔn)備

開始前，我們需要準(zhǔn)備本地開發(fā)環(huán)境。

1. NodeJS (>=14)；
2. Yarn (1.x)，安裝方式：執(zhí)行 npm install -g yarn；
3. Lerna，安裝方式：執(zhí)行 npm install -g lerna。

02 創(chuàng)建一個新的構(gòu)件項目

開發(fā)者可以按需創(chuàng)建自己的構(gòu)件項目，每個項目中可以包含多個構(gòu)件包，每個構(gòu)件包又可以定義多個構(gòu)件。

使用優(yōu)維官方提供的 CLI 工具即可一鍵生成新的構(gòu)件項目：

這個新生成的項目已經(jīng)初始化提供了構(gòu)建、測試、打包、代碼靜態(tài)檢查等現(xiàn)代化的前端工程化配置，如果我們將項目托管在 GitHub 上，還可以開箱即用地使用包括持續(xù)集成和依賴更新等在內(nèi)的自動化工作流。

03 創(chuàng)建一個新的構(gòu)件包

初始化的項目還沒有任何構(gòu)件包，我們先使用項目中內(nèi)置的腳手架工具創(chuàng)建一個：

1. 運行 yarn yo；
2. 選擇 a new package of bricks；
3. 輸入構(gòu)件包的名稱，例如 my-bricks；
4. 然后，我們可以選擇同時創(chuàng)建一個構(gòu)件，本文為了演示我們先選擇跳過。

新的構(gòu)件包的代碼就已經(jīng)初始化完成，其中的各種工程配置文件可以按需自由調(diào)整。

04 創(chuàng)建一個新構(gòu)件

構(gòu)件包有了，我們再創(chuàng)建一個新的構(gòu)件：

1. 運行 yarn yo；
2. 選擇 a new brick；
3. 輸入構(gòu)件的名稱，例如 hello-world。

05 編寫構(gòu)件

初始化的構(gòu)件主要包含以下文件：

這個構(gòu)件已經(jīng)可以使用，我們先啟動開發(fā)版本的構(gòu)建：

然后打開一個新的終端來啟動開發(fā)服務(wù)：

接著就可以在我們的微應(yīng)用中使用該構(gòu)件了：

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

保存后，本地頁面將立即更新：

06 屬性

我們再讓構(gòu)件支持一個“按鈕類型”的屬性：

最后修改我們的應(yīng)用編排，設(shè)置一個按鈕類型：

07 事件

我們再為它添加一個點擊事件：

最后修改我們的應(yīng)用編排，綁定一個按鈕事件：

點擊該按鈕，將彈出提示信息：

至此，我們完成了基本的構(gòu)件能力的開發(fā)。