在 Web 前端开发中，UI5 是一个广泛使用的前端框架。而在 UI5 开发中，项目部署和调试往往需要一个本地服务器。在本文中，我们将介绍 npm 包 ui5server，它是一个可以帮助我们快速搭建 UI5 项目环境并实现项目调试的工具。
安装 ui5server
在安装之前，我们需要先确保已经具备 Node.js 环境。在终端(cmd)中输入以下命令来安装 ui5server：
--- ------- -- ---------
这条命令会将 ui5server 安装到全局环境中，这样我们就可以在任何目录下使用 ui5server 了。
配置 ui5server
运行 ui5server 命令，它将在当前目录下生成一个默认配置文件 ui5.yaml：
---------
我们也可以手动创建 ui5.yaml 文件，在文件中添加以下配置：
-------
- ----- ----------
---- --------------------------------
- ----- -------
---- --------其中，routes 是一个数组，表示 ui5server 的路由规则。在上面的配置中，我们为 ui5server 配置了两个路由：
路由 1：/resources
这个路由规则表示将 SAPUI5 框架资源地址明确为 /resources，后续页面会加载资源时会调用这个路由来获取 SAPUI5 框架所需的资源。
路由 2：/webapp
这个路由规则表示使用当前目录下的 webapp 作为静态资源目录，加载 webapp 目录下的页面时会调用这个路由规则。
完成配置后，我们可以再次运行 ui5server 命令，它就会按照我们配置的规则启动服务。
ui5server 调试
在 ui5server 启动之后，我们就可以在浏览器中访问 Web 应用了。例如：http://localhost:8080/webapp/index.html。此时，我们可以使用浏览器的开发者工具进行调试。在浏览器中打开开发者工具，在源代码中进行调试，在保存代码之后，浏览器自动更新页面。
ui5server 的进阶应用
在肥大的 UI5 项目中，往往会分为前端部分和后端部分，此时我们就需要将前端部分和后端部分分开开发，使用 ui5server 静态资源项目和后端服务进行交互。
在前端部分中，我们可以通过 ajax 请求获取后端服务提供的接口，实现前后端的交互。在 ui5.yaml 当中，可以配置反向代理，实现对后端服务的请求转发：
-------
- ----- ----
------- ---------------------
- ----- ----------
---- --------------------------------
- ----- -------
---- --------在上面的配置中，我们为 ui5server 配置了 3 个路由：
路由 1：/api
这个路由规则表示，当前端应用请求 /api 路径时，将有 ui5server 将请求转发到 http://localhost:3000 这个后端服务地址。
路由 2：/resources
这个路由规则表示将 SAPUI5 框架资源地址明确为 /resources，后续页面会加载资源时会调用这个路由来获取 SAPUI5 框架所需的资源。
路由 3：/webapp
这个路由规则表示使用当前目录下的 webapp 作为静态资源目录，加载 webapp 目录下的页面时会调用这个路由规则。
这样，我们就可以进行前后端的分离开发了。在前端页面当中，我们只需要使用 Ajax 的方法，请求 /api 下的接口即可。而请求会被 ui5server 转发到后端服务地址。这样，我们就可以轻松地开发和调试我们的前端项目了。
示例代码
下面是一个简单和 ui5server 集成的示例：
ui5.yaml 配置文件：
-------
- ----- ----
------- ---------------------
- ----- ----------
---- --------------------------------
- ----- -------
---- --------对应的前端页面请求：
--------
---- -------
----- ---
------- ------
--------- -------
-------- -------------- -
------------------
--
------ --------------- -
-------------------
-
---完成上面的配置后，在启动 ui5server 后，前端页面会发送一个 /api 的 Ajax 请求，ui5server 会将请求 sent to http://localhost:3000，获取数据并返回给前端页面。在前端页面中，我们可以成功地获取了该路由后端返回的数据。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60057aea81e8991b448eb6ef