如何在浏览器里开发并运行|如何在浏览器里开发并运行 SAP UI5 应用
除了 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.l...
新开一个浏览器窗口，在末尾添加上 index.html，就可以访问到这个 SAP UI5 应用了：
https://jerry-ui5-app--8080.l...
文章图片
关于运行在 StackBlitz 上的 SAP UI5 应用的调试，同运行在其他环境的并无区别，ctrl+alt+shift+p，在弹出的对话框里启用调试模式，刷新浏览器，即可加载调试版本的 JavaScript 源代码进行调试。
文章图片
【如何在浏览器里开发并运行|如何在浏览器里开发并运行 SAP UI5 应用】更多Jerry的原创文章，尽在："汪子熙":
文章图片
推荐阅读
- 任时光绽放成六月繁花
- 我从来不做坏事
- 考研英语阅读终极解决方案——阅读理解如何巧拿高分
- 樱花雨
- 如何寻找情感问答App的分析切入点
- 拍照一年啦，如果你想了解我，那就请先看看这篇文章
- mybatisplus如何在xml的连表查询中使用queryWrapper
- MybatisPlus使用queryWrapper如何实现复杂查询
- 人如果没梦想，和咸鱼有什么区别（自媒体时代把握住就能咸鱼翻身）
- 如何在Mac中的文件选择框中打开系统隐藏文件夹