使用UI5 Tooling构建自包含包后出现Uncaught ReferenceError: sap is not defined错误

核心问题分析 #

你遇到的报错本质是自包含构建产物中未正确打包SAPUI5核心库代码，导致浏览器加载sap-ui-custom.js时无法识别sap全局对象。结合你的场景（本地开发用1.108，部署环境仅支持1.71），问题根源大概率是依赖版本不匹配或构建配置缺失核心库引用。

分步解决方案 #

1. 强制锁定SAPUI5依赖版本为1.71 #

本地开发用的1.108与部署环境的1.71版本差异过大，必须确保构建时使用1.71版本的SAPUI5库：

• 修改ui5.yaml的framework配置，指定1.71的最新稳定补丁版本：

  specVersion: "3.0"
  metadata:
    name: 你的应用名称
  type: application
  framework:
    name: SAPUI5
    version: 1.71.61
    libraries:
      - name: sap.ui.core # 必须显式声明核心库
      - name: sap.m
      - name: sap.ui.layout
      # 添加你应用实际用到的其他SAPUI5库
  

• 清理旧依赖并重新安装：

  rm -rf node_modules dist
  npm install
  

2. 调整构建命令参数 #

UI5 CLI 3.x的自包含构建需要明确指定核心库打包，尝试使用以下命令：

ui5 build self-contained --include-all-dependencies --include-sap-ui-core --clean-dest --dest dist

注：--include-sap-ui-core参数会强制将核心库代码整合到sap-ui-custom.js中，避免遗漏。

3. 验证构建产物与index.html引用 #

• 检查dist/resources目录，确认sap-ui-custom.js存在且文件非空；
• 打开dist/index.html，确认bootstrap脚本引用正确：

  <script id="sap-ui-bootstrap"
          src="resources/sap-ui-custom.js"
          data-sap-ui-theme="sap_belize"
          data-sap-ui-libs="sap.m,sap.ui.core"
          data-sap-ui-compatVersion="edge"
          data-sap-ui-preload="async"
          data-sap-ui-resourceroots='{"你的应用命名空间": "./"}'>
  </script>
  

  重点确认data-sap-ui-libs中包含sap.ui.core，且src路径与实际文件一致。

4. 排查UI5 CLI版本兼容性 #

UI5 CLI 3.7.0与部分旧版本构建工具可能存在兼容问题，尝试锁定适配1.71版本的构建依赖：

npm install @sap/ui5-builder@2.11.0 --save-dev

该版本的builder与UI5 CLI 3.x及SAPUI5 1.71兼容性较好。

额外注意事项 #

• 构建前务必删除dist和node_modules目录，避免缓存干扰；
• 测试构建产物时，建议用静态文件服务器（比如npx serve dist）启动，不要直接打开本地index.html，避免跨域或路径解析问题。

内容的提问来源于stack exchange，提问作者szelbi