在閱讀本文之前，推薦先閱讀 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的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。