這是Jerry 2021年的第 15 篇文章，也是汪子熙公眾號總共第 286 篇原創文章。

Jerry 之前寫過一篇文章 介紹一個免費的云開發工具：Cloud Shell，這個工具其實就是在瀏覽器里使用的遠程 Linux Shell 環境，預裝了 Java，npm，git，nodejs，docker 等常用的開發和部署工具。

本文介紹另一個在瀏覽器里使用的在線 IDE .

Jerry 所在的團隊，使用 Visual Studio Code 進行 SAP Spartacus 的 TypeScript 開發。

除了 Visual Studio Code 之外，StackBlitz 是另一個我們團隊經常使用的在線 IDE：

StackBlitz 無需注冊，使用 Github 賬號即可登錄。其界面風格和 Visual Studio Code 極為相似，支持前端三駕馬車 Angular，React 和 Vue 項目的創建，包含 Web 項目在線開發，自動管理項目依賴，自動編譯，頁面效果實時預覽等實用功能。

[此處插入動畫]

StackBlitz 一個典型的使用場景：Jerry 在開發過程中發現某個 Angular 功能點，沒有按照我期望的方式工作。顯然是我使用的方法不對，我想尋求團隊內 Angular 大佬的幫助。

簡單地把我遇到問題的代碼和錯誤截圖發給大佬們，顯然是一種不禮貌的做法。僅僅憑借靜態代碼和錯誤提示遠遠不夠，最好能提供一個大佬能夠在其本地方便地復現問題的環境：StackBlitz 就是一個比較好的選擇。

于是我在 StackBlitz 里創建一個簡單的 Angular 工程，把我遇到的問題在這個 Angular 工程里復現，然后通過下圖的 Share 按鈕，將項目 url 發生給團隊大佬。對方在瀏覽器里打開該 url，就可立即復現我的問題。

StackBlitz 能否作為 SAP UI5 開發的在線 IDE 呢？Jerry 簡單試了試，雖然 StackBlitz 無法像原生支持 Angular，React 和 Vue 那樣支持 SAP UI5，但仍然可以用來做一些簡單的 SAP UI5 應用的驗證工作，比如測試某些 SAP UI5 控件的行為。

之前 Jerry 的文章 一個用于SAP UI5學習的腳手架應用，沒有任何后臺API的依賴 介紹的腳手架應用，運行在 nodejs express 框架上。同樣，我們可以把這個腳手架應用遷移到 StackBlitz 上。

看一個實際的使用 SAP UI5 腳手架應用的需求。

下圖是 SAP Spartacus 用戶編輯頁面，每個用戶可以分配若干個角色，除了點擊下圖紅色每種角色對應的圓角正方形框之外，點擊綠色的文本框，也需要能選中對應的角色。

這是一個 Accessibility 的需求，為了確保用戶在屏幕尺寸較小的移動設備上，也能毫不費力的勾選某個角色。

現在我想驗證 SAP UI5 的 Checkbox 控件，是否也同樣具有該 Accessibility 功能，即點擊 Checkbox 的文本本身，也能選中該 Checkbox.

StackBlitz 中新建一個基于 HTML/JS/CSS 的 Static 項目：

把下圖的27行代碼粘貼到 StackBlitz 正中的 HTML 編輯器里去：

屏幕最右邊區域中，StackBlitz 的嵌入服務器，會自動把 index.html 的內容渲染出來。

渲染出的 SAP UI5 頁面里，我看到了期望出現的 Customer Checkbox，并且點擊 Customer 文本，發現前面的小勾也自動被勾上了，說明 SAP UI5 的 Checkbox 控件，和 Spartacus 一樣，也滿足 Accessibility 的需求。

查看渲染出的 HTML 源代碼可知道實現原理：sap.m.Checkbox 在運行時會渲染出 div( role 為 checkbox ) 和 label 元素，label 元素的 for 屬性的值，等于 div 元素的 id，從而建立起二者的綁定關系。瀏覽器即可確保，label 被點擊時，其關聯到的 role 為 checkbox 的 div 元素也自動被選中。

遺憾的是，通過 StackBlitz 向導創建的 Static Web 項目，只支持加載 HTML/CSS/JS/JSON 類型的資源，而 SAP UI5 XML 視圖，因為其格式為 xml，無法正常被 StackBlitz 加載。因此，在 StackBlitz 里進行 SAP UI5 開發，只能使用基于 JavaScript 的視圖類型。

如果有朋友找到在 StackBlitz 里使用 SAP UI5 XML 視圖的辦法，歡迎分享給大家。

當然，大家也可以嘗試 Visual Studio Code 這些和 SAP UI5 相關的 Extensions，感謝閱讀。

更多閱讀

• 那些年我用過的SAP IDE

• Jerry和您聊聊Chrome開發者工具

• ABAP開發環境語法高亮的那些事兒

• 介紹一個免費的云開發工具：Cloud Shell

更多Jerry的原創文章，盡在：“汪子熙”:

總結

以上是生活随笔為你收集整理的介绍一个能开发简单SAP UI5应用的在线IDE：StackBlitz的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。