Vite+Svelte+TS项目引入AMD规范Azure DevOps SDK报错求助

Azure DevOps官方SDK基于AMD模块规范编写，而Vite默认采用ES模块机制，直接引入就会触发define is not defined错误，不用修改TS的AMD编译选项，按以下步骤配置即可解决：

第一步：修改Vite配置文件 #

在vite.config.ts中添加配置，让Vite适配SDK的AMD格式：

import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';

export default defineConfig({
  plugins: [svelte()],
  optimizeDeps: {
    include: ['azure-devops-extension-sdk', 'azure-devops-extension-api'],
    esbuildOptions: {
      define: {
        global: 'window'
      }
    }
  },
  build: {
    rollupOptions: {
      // 保持ES模块输出，无需切换为AMD
      output: { format: 'es' },
      // 将SDK标记为外部依赖，避免打包时处理出错
      external: ['azure-devops-extension-sdk', 'azure-devops-extension-api'],
      plugins: [
        {
          name: 'fix-azure-devops-sdk-amd',
          resolveId(source) {
            if (source.startsWith('azure-devops-extension-')) {
              return source;
            }
            return null;
          },
          load(id) {
            if (id === 'azure-devops-extension-sdk') {
              // 手动封装SDK，规避AMD的define调用
              return `
                import * as sdk from 'azure-devops-extension-sdk/umd/azure-devops-extension-sdk';
                window.define = () => {};
                window.require = () => sdk;
                export default sdk;
                export const init = sdk.init;
                export const getAccessToken = sdk.getAccessToken;
                export const getService = sdk.getService;
              `;
            }
            return null;
          }
        }
      ]
    }
  }
});

第二步：调整SDK的引入与初始化逻辑 #

在项目入口文件（如src/main.ts）中，按以下方式加载并初始化SDK：

// 导入封装后的SDK
import { init, getAccessToken, getService } from 'azure-devops-extension-sdk';

async function setupExtension() {
  // 必须先完成SDK初始化
  await init();
  
  // 后续正常调用SDK API即可
  const accessToken = await getAccessToken();
  const workItemService = await getService('workitemtracking');
  // 这里写你的业务逻辑代码
}

setupExtension();

第三步：修复TypeScript类型提示 #

如果TS提示window.define或window.require不存在，在src/vite-env.d.ts中添加全局声明：

declare global {
  interface Window {
    define: (...args: any[]) => void;
    require: (moduleId: string) => any;
  }
}

export {};

关于你之前踩的坑的说明 #

• requirejs方案失败：Vite的ES模块环境与requirejs的AMD加载逻辑冲突，强行引入会导致模块加载顺序混乱，仍会触发define未定义错误。
• Git子模块失效：子模块内部代码再次引入官方SDK依赖，相当于嵌套调用AMD模块，Vite未处理该场景，因此依旧报错。

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