一个好用的 SAP UI5 本地打包(build)工具，自动生成Component-preload.js

在阅读本文之前，推荐先阅读 Jerry 这篇文章，以了解必要的前置知识：

什么是 SAP UI5 的 Component-preload.js, 什么是Minification和Ugification

本文使用的出于演示目的的 SAP UI5 应用源代码，位于我的Github 仓库里：

https://github.com/wangzixi-diablo/ui5-toolset

将其克隆到本地，用Visual Studio Code打开。找到webapp文件夹下的index.html, 右键，选择“Open with Live Server”：

这个 Live Server，实际上是 Visual Studio Code 一个扩展，能打开一个嵌入的 web 服务器，渲染 Visual Studio Code 里正在编辑的 web 应用。有了它，我们就无须在本地手动配置和启动诸如 Tomcat，Jetty 或者用代码启动 nodejs express 这种工具。

该Visual Studio Code 扩展的安装步骤，请参考 Jerry 的文章：一个好用的Visual Studio Code扩展 - Live Server，适用于前端小工具开发。

选择Open with Live Server后，确保看到下面的 SAP UI5 页面：

打开Chrome开发者工具，会看到 SAP UI5 框架试图加载一个名为Component-preload.js的资源文件：

我们现在还没有生成这个文件，所以当然是遇到 404 NOT found错误了。

在Visual Studio Code里安装这个名叫UI5 Tools的扩展：

然后在 Visual Studio Code的命令行面板，Command Pallete里，选择：UI5 Tools: Builder -> Build UI5 project：

成功打包后，会生成一个新的dist文件夹，里面包含了我们需要的Component-preload.js.

选中dist文件夹里的index.html, 右键菜单选择Open with Live Server:

这次就观察到component-preload.js被成功加载了：

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

一个好用的 SAP UI5 本地打包(build)工具，自动生成Component-preload.js相关推荐

介绍一个能开发简单SAP UI5应用的在线IDE：StackBlitz
这是Jerry 2021年的第 15 篇文章,也是汪子熙公众号总共第 286 篇原创文章. Jerry 之前写过一篇文章介绍一个免费的云开发工具:Cloud Shell,这个工具其实就是在浏览器里使 ...
SAP UI5 初学者教程之二十八 - SAP UI5 应用的集成测试工具 OPA 介绍试读版
一套适合 SAP UI5 初学者循序渐进的学习教程教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 初学者教程之一:Hello World SAP UI5 初学者教程之二:SAP UI5 ...
SAP UI5 初学者教程之二十七 - SAP UI5 应用的单元测试工具 QUnit 介绍试读版
一套适合 SAP UI5 初学者循序渐进的学习教程教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 初学者教程之一:Hello World SAP UI5 初学者教程之二:SAP UI5 ...
SAP UI5 应用开发教程之二十八 - SAP UI5 应用的集成测试工具 OPA 介绍
本教程前一步骤,我们介绍了 SAP UI5 单元测试工具 QUnit 的使用方法.本步骤介绍测试金字塔模型中位于单元测试上层的集成测试在 SAP UI5 中的实现工具:OPA. 本步骤对应的源代码位于 ...
Android Studio SVN配置忽略文件 1.用Android Studio创建一个项目，会在根目录和Module目录下自动生成.gitignore文件，貌似是Git的配置文件，
Android Studio SVN配置忽略文件 1.用Android Studio创建一个项目,会在根目录和Module目录下自动生成.gitignore文件,貌似是Git的配置文件,和SVN没有关 ...
一个详尽的面向 SAP UI5 初学者的教程 - 如何在 SAP UI5 中绘制图表 Chart
这是 Jerry 2021 年的第 65 篇文章,也是汪子熙公众号总共第 342 篇原创文章. 观沧海曹操东临碣石,以观沧海. 水何澹澹,山岛竦峙. 树木丛生,百草丰茂. 秋风萧瑟,洪波涌起. 日 ...
一个最简单的SAP UI5应用部署到SAP云平台CloudFoundry环境后，自动生成了哪些资源
我用SAP WebIDE新建了一个UI5应用: 该MTA应用除了名为app的HTML5 module外,还包含mta_app_Router和mta_app_ui_deployer: 后者是app HT ...
SAP UI5 应用开发教程之二十七 - SAP UI5 应用的单元测试工具 QUnit 介绍
Jerry 在之前做 SAP UI5 标准开发和现在使用 Angular 开发 SAP Spartacus 应用时,我们团队的开发规范就是,每增添一个新的前端 feature,必须要用一个新增的单元测 ...
使用 SAP UI5 CLI 命令行工具构建和运行 SAP UI5 应用
源代码 Github 地址:https://github.com/wangzixi-diablo/ui5-for-kyma 本地路径:C:\Code\frontend-ui5-mssql 本文介绍 S ...

一个好用的 SAP UI5 本地打包(build)工具，自动生成Component-preload.js

一个好用的 SAP UI5 本地打包(build)工具，自动生成Component-preload.js相关推荐

最新文章

热门文章