如何在SAP UI5应用中通过ui5-tooling-modules正确加载@azure/msal-browser？

问题分析 #

你遇到的模块解析错误，核心原因是UI5工具链的中间件顺序配置不当，导致@azure/msal-browser的请求被错误转发到SAP UI5 CDN，而非读取本地npm包资源；同时缺少对目标npm包的显式处理配置，工具无法正确识别并加载该模块。

解决方案步骤 #

1. 调整UI5中间件执行顺序 #

修改ui5.yaml的server.customMiddleware部分，确保ui5-tooling-modules-middleware和ui5-tooling-transpile-middleware在fiori-tools-proxy之前执行，避免代理拦截npm包资源请求：

server:
  customMiddleware:
    - name: ui5-tooling-modules-middleware
      afterMiddleware: compression
    - name: ui5-tooling-transpile-middleware
      afterMiddleware: ui5-tooling-modules-middleware
      configuration:
        debug: true
        transformModulesToUI5:
          overridesToOverride: true
        excludePatterns:
          - /Component-preload.js
    - name: fiori-tools-proxy
      afterMiddleware: ui5-tooling-transpile-middleware
      configuration:
        ui5:
          path:
            - /resources
            - /test-resources
          url: https://ui5.sap.com
    - name: fiori-tools-appreload
      afterMiddleware: fiori-tools-proxy
      configuration:
        port: 35729
        path: webapp
        delay: 300
    - name: fiori-tools-preview
      afterMiddleware: fiori-tools-appreload

2. 为ui5-tooling-modules添加显式包配置 #

在builder.customTasks的ui5-tooling-modules-task中，指定要处理的@azure/msal-browser包，确保工具能正确识别并打包该模块：

builder:
  customTasks:
    - name: ui5-tooling-modules-task
      beforeTask: replaceVersion
      configuration:
        addToNamespace: true
        packages:
          - name: "@azure/msal-browser"
            exposeAs: "@azure/msal-browser"
    - name: ui5-tooling-transpile-task
      afterTask: ui5-tooling-modules-task
      configuration:
        addToNamespace: true

3. 验证导入语句 #

保持控制器中的导入语句正确，无需添加.js后缀：

import Controller from "sap/ui/core/mvc/Controller";
import * as msal from "@azure/msal-browser";

export default class App extends Controller {
    public onInit(): void {
        const msalConfig = {
            auth: {
                clientId: 'YOUR_CLIENT_ID'
            }
        };
        console.log(msal);
    }
}

4. 清理缓存并重启服务 #

执行以下命令清理UI5缓存，然后重启开发服务：

ui5 cache clean
npm start

备选方案：直接引入CDN脚本 #

如果上述工具链配置仍无法解决问题，可以绕过npm包管理，直接在webapp/index.html中引入MSAL的CDN脚本，全局使用该模块：

<script src="https://alcdn.msauth.net/browser/2.38.1/js/msal-browser.min.js"></script>

修改控制器代码：

import Controller from "sap/ui/core/mvc/Controller";

export default class App extends Controller {
    public onInit(): void {
        const msalConfig = {
            auth: {
                clientId: 'YOUR_CLIENT_ID'
            }
        };
        const msalInstance = new window.msal.PublicClientApplication(msalConfig);
        console.log(msalInstance);
    }
}

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