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

在閱讀本文以前，推薦先閱讀 Jerry 這篇文章，以瞭解必要的前置知識：

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

本文使用的出於演示目的的 SAP UI5 應用源代碼，位於個人Github 倉庫裏：

https://github.com/wangzixi-d...

將其克隆到本地，用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的原創文章，盡在："汪子熙":