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

已于 2024-10-13 23:08:37 修改
阅读量747 收藏 3
点赞数
CC 4.0 BY-SA版权
分类专栏： SAP UI5 百科全书 文章标签： javascript 开发语言 ecmascript
于 2021-04-06 20:34:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/i042416/article/details/115470173

在阅读本文之前，推荐先阅读 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 扩展的安装步骤࿰

了解本专栏 订阅专栏 解锁全文
什么是 SAP UI5 的 Component-preload.js, 什么是Minification和Ugification
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
04-06 530
SAP UI5 基于 MVC 架构，一个典型的 SAP UI5 工程包含了 controller，view，component和 html 这几种不同类型的资源文件： 这种资源文件细粒度的拆分，其优点是每个文件职责清晰，符合开发人员对 MVC 传统架构的认识，因而在项目开发过程中，有助于SAP UI5 开发人员，在正确的位置编写正确的代码。 然而，开发结束后，切换到生产模式运行时，这种拆分方式会给SAP UI5的性能造成一些消极的影响。 每个资源文件需要一个单独的网络请求去加载。 以 Jerry 的一个用
40. 如何制作包含了 component-preload.js 在内的 SAP UI5 发布版本
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
02-22 1968
本教程之前的三十九个步骤，我们都是通过命令行 ui5 serve 启动本地服务器，以 development mode 即开发模式运行的 SAP UI5 应用。 开发模式下运行的 web 应用，任何人都可以在 Chrome 开发者工具的 Sources 面板里，查看到这个应用的完整源代码，如下图所示。 另一方法，我们随便打开一个常用的网站，比如百度，知乎，CSDN 等等，发现 Chrome 开发者工具 Sources 标签页里观察到这些网站的 JavaScript 源代码，都经过压缩和混淆，函数名和 Ja
UI5Preload:用于 OPENUI5SAPUI5 项目的 Component-preload.js gulp 文件
07-17
UI5预加载 使用 Gulp 为 OPENUI5/SAPUI5 构建 Component-preload.js。 预加载仅组合您想要的文件（主页、搜索、登录页面等），因此您可以使更大的应用程序依赖于初始加载。 请相应地配置 gulpfile（视图目录、预加载目标和命名空间）。 Gulp 构建将 crlf 和 utf8 添加到 Component-preload.js 文件中，因此您不会遇到 Eclipse 问题。 入门 将 gulpfile.js 和 package.json 下载到 Project/WebContent/ 目录。 使用 CMD/Terminal 导航到 Webcontent 目录，使用以下命令安装依赖项： npm install 用以下命令启动 Gulp： gulp Gulp 现在会将 gulpfile.js 中配置的所有文件合并到 Component-prelo
PreloadJS 预加载及实现进度加载效果
blog
02-23 4373
文章目录前言一、preload.js二、Demo总结 前言 在 H5 的开发过程中，我们不难发现在首次打开 H5 时，会有一个进度条表示当前页面全部文件的加载进度，并且当加载到100%的时候会跳转显示出首页的这一整个流程。这个流程我们可以通过 preload.js 插件来完成，下面我们先来介绍一下这个插件已经常用的监听事件。 一、preload.js 它是一个一致的方式预先加载在HTML应用的内容，以及预加载可以使用HTML标签作为XHR完成。 我们将要实现的功能，主要是在 LoadQueue 类中
使用 preloadComponents 进行组件预加载
最新发布
08-18 541
在这篇文章中，我们学习了如何在Nuxt 3中使用来提高应用的性能。通过提前加载需要的���件，我们可以确保用户在浏览页面时获得更加流畅的体验。编程智域 前端至全栈交流与成长使用 preloadComponents 进行组件预加载 | cmdragon’s Blog。
通过SAP Build快速构建UI5原型App
Unplugged
04-19 930
通过SAP Build快速构建UI5原型App SAP Build是一个非常不错的快速构建高保真UI5应用的服务，可以免费注册使用。 在设计驱动开发的流程中，App的设计是非常重要的步骤，通过低保真、高保真的设计原型可以快速获取用户的反馈，然后快速调整原型，提高沟通的效率，最大程度节约开发资源。 https://www.build.me/ 通过Build服务，可以快速构建UI5的高保真UI，然后根...
SAP UI5 Tools 里配置文件 ui5-local.yaml 的配置要点
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
02-18 547
ui5.yaml 文件里的文件路径必须用符号 / 即 forward slash 符号。 framework 类型可以选择 SAPUI5 或者 OpenUI5： 上图打印的信息： Using SAPUI5 version: 1.98.0 因为我们把版本号 1.98.0 定义在 ui5-local.yaml 文件的 framework 区域的 version 字段里。 但是运行时，我们会看到这个版本号被另一个优先级更高的设置所覆盖：即 webapp 文件夹中的 manifest.json 中的 m
145. SAP UI5 本地开发时 ui5.yaml 文件对构建 Release 版本应用目录的影响分析
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
11-01 756
本文通过教程读者一个实际的练习步骤中遇到的错误，详细阐述了 SAP UI5 本地开发工程文件里 `ui5.yaml` 对 SAP UI5 运行时项目文件结构和命令行 ui5 build 打包构建过程的影响和工作原理。
UI5 Tooling
06-28 591
UI5 Tooling是一个基于Node.js开发的开源项目。它提供了一个模块化的、可配置的和可扩展的命令行接口，为应用程序、库和重用组件的高效开发定制了UI5框架。 开源工具重用，灵活扩展，宜集成，先进语言特性，多IDE适用。总之，好用高效。 从架构去了解UI5 Tooling，我的理解是首先它是一组命令行工具，基于NodeJS集成了File System,Project,Logger,Server,Builder这几个模块，不但可以本地执行，还可以用于SAP webIDE以及SAP Business
传统SAP UI5 Vscode下开发与部署
shuishi2005的专栏
10-15 1459
SAPUI5 VSCODE开发部署
buildComponent：使用webpack配置打包一个组件
02-16
打包一个组件 远程组件入门套件 入门工具包，用于快速创建可以由@paciolan/remote-component延迟加载的Remote React组件。 入门 克隆存储库并初始化项目 # create new repo mkdir my-component cd my-component git init # pull the remote component starter kit git pull https://github.com/Paciolan/remote-component-starter.git --depth=1 git commit --amend -m " chore: :hammer_and_wrench_selector: pull remote-component-starter " # install dependencies npm ci 修改package.json并将您的入门工具包值替换为您自己的
版本（version）、组件（component）和构建（build）的区别
jinjiankang1980的专栏
02-01 1201
版本（version）：项目的更新发展过程 组件（component）：项目的不同组成部分 构建（build）：项目某版本的更新发展过程
把UI5程序打包成安卓App（英）
鸣鸣专栏
11-28 1064
【博主SAP/ABAP交流群689746838】 This tutorial would introduce how to package UI5 application into a hybrid android mobile application by using SAP Mobile Platform(SMP) SDK. Operating System: Windows 7/10 6...
SAPUI5 - Component
路一的博客
05-24 988
UI5的Component概念: UI5有两种Component: 一种是faceless component (class: sap.ui.core.Component), 这种component没有用户界面，一般用于从后台系统获取数据。 另一种是UI component(class: sap.ui.core.UIComponent), 这些组件是用于屏幕展示的，一般对应一
webpack组件库打包
weixin_41359197的博客
09-28 1904
App.vue引入index.js，替换componentName为要显示组件的name，页面就会加载对应name的示例组件。createComponent.js：自动生成组件和示例组件、配置components.json组件列表。注意：打包的组件需要在build\components.json文件配置，初始化组件指令会自动添加上去。components.json：组件列表（key：组件名，value：相对路径）npm run new:component 组件名 组件描述：创建组件模板。
SAPUI5 (20) - 在 Component 中封装启动代码
王敏的专栏
02-18 4479
本篇对上篇的 Master-detail 代码进行重构。SAP Fiori 的 app 并不是通过 index.html 启动的，而是通过 Component 启动，因为 Launchpad 包含多个app。所以我们学习 OpenUI5 也应该是熟悉这种模式。
FiORI2.0学习笔记-shell controller及&component.js
期待一个富婆
11-14 641
shell controller 根元素 component 一些配置信息
React Loadable中文文档
仗剑天涯，从摘要开始
06-27 4243
安装： yarn add react-loadable 范例： import Loadable from 'react-loadable'; import Loading from './my-loading-component'; const LoadableComponent = Loadable({ loader: () => import('./my-component'), loading: Loading, }); ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

汪子熙

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值