除了 SAP 公司官方支持的 WebIDE，SAP Business Application Studio 這些運行在瀏覽器端的開發工具，可以進行 SAP UI5 的開發之外，我們還可以使用 StackBlitz 這款在線 web 應用的開發工具，來開發 SAP UI5 應用。

我這里做了一個例子，大家可以通過這個鏈接 訪問。

我們打開這個頁面，觀察到的屏幕可以分成四個區域，下面逐一介紹。

用過 Visual Studio Code 這款編輯器的朋友們不難發現，這其實就是 Visual Studio Code 的瀏覽器版本。

(1) 顯示一個文件樹結構，包含了該 SAP UI5 工程的所有資源文件，包含 xml 視圖實現和控制器實現(JavaScript 代碼)。Jerry 提供的這個例子，SAP UI5 應用采取了 ui5 cli 這個開源的構建工具來構建和啟動，而 ui5 cli 基于 Node.js，因此上圖還能觀察到 ui5 cli 的配置文件 ui5.yaml 和 Node.js 項目所需的 package.json 文件。

(2) StackBlitz 在線開發環境里編輯文件的主要區域。

(3) StackBlitz 的終端控制臺，我們可以在此處執行各種命令行。
(4) SAP UI5 應用一旦啟動后，渲染的頁面會出現在這個區域。

目前上圖區域 4 顯示的是 botting webcontainer. 在瀏覽器編輯環境的上下文里，Web Container 技術能夠讓 Node.js 應用在瀏覽器環境里以原生方式運行。

我們在區域 3 的終端里，輸入命令行 ui5 serve:

首先會看到 StackBlitz 自動去下載 ui5 cli 的 package，相當于為我們執行了 npm install：

緊接著， 區域 4 顯示了當前這個 SAP UI5 工程的所有文件夾列表。

我們將這個 url 拷貝下來：
https://jerry-ui5-app–8080.local.webcontainer.io

新開一個瀏覽器窗口，在末尾添加上 index.html，就可以訪問到這個 SAP UI5 應用了：

https://jerry-ui5-app–8080.local.webcontainer.io/index.html

關于運行在 StackBlitz 上的 SAP UI5 應用的調試，同運行在其他環境的并無區別，ctrl+alt+shift+p，在彈出的對話框里啟用調試模式，刷新瀏覽器，即可加載調試版本的 JavaScript 源代碼進行調試。

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

總結

以上是生活随笔為你收集整理的如何在浏览器里开发并运行 SAP UI5 应用的全部內容，希望文章能夠幫你解決所遇到的問題。

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