zoukankan      html  css  js  c++  java
  • 一个好用的 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的原创文章,尽在:"汪子熙":

  • 相关阅读:
    webpack常见问题 收藏
    ES6 模块
    ES6 Class 类
    ES6 迭代器
    ES6 函数
    ES6 数组
    ES6 对象
    记一次pda(安卓)环境配置流程
    类型转换
    DOM事件
  • 原文地址:https://www.cnblogs.com/sap-jerry/p/14624121.html
Copyright © 2011-2022 走看看