如何用Vite为含顶级await的TypeScript用户脚本构建async iife？

因为Vite默认的iife格式不支持直接生成async IIFE，你可以通过两种简单方式处理：

方法一：入口文件手动包裹Async IIFE #

直接在你的TypeScript入口文件（比如src/main.ts）里，把所有代码包裹进一个自执行的async函数：

(async () => {
  // 这里写你的所有代码，包括使用顶级await的逻辑
  const res = await fetch('https://example.com/api/data');
  const data = await res.json();
  
  // 用户脚本核心逻辑
  console.log('用户脚本运行中:', data);
})();

然后保持Vite的build配置不变：

// vite.config.ts
import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    lib: {
      entry: 'src/main.ts',
      formats: ['iife'],
      fileName: () => 'userscript.js',
    },
  },
});

Vite打包后会把这个async IIFE作为整体输出，完全满足用户脚本独立运行的需求。

方法二：通过Vite Rollup配置自定义输出 #

如果你不想在入口文件里手动包裹，可以通过Rollup的输出配置来添加async IIFE的包裹层：

// vite.config.ts
import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    lib: {
      entry: 'src/main.ts',
      name: 'UserScript',
      formats: ['es'], // 先输出ES模块
      fileName: () => 'userscript.js',
    },
    rollupOptions: {
      output: {
        // 手动包裹成Async IIFE
        format: 'iife',
        banner: '(async () => {',
        footer: '})();',
      },
    },
  },
});

这种方式会让Rollup把ES模块代码包裹进async自执行函数，最终输出符合要求的用户脚本。

注意：两种方法都需要确保你的用户脚本运行环境支持async/await（现代浏览器都已支持，Tampermonkey/Greasemonkey等脚本管理器也完全兼容）。

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