场景

在vue3+vite3 模块中使用顶层await打包的时候报错

原因

在模块顶层中使用await，一开始是不支持的，后面才支持了，旧ES6标准，await的是需要放置在async 函数中才能使用，现在新标准允许了，但是也需要某些特定的最新的浏览器（比如chrome87就不支持）才能运行，而vite默认并不会在打包的时候进行转换，就需要进一步成转化正常的代码，

解决方式

vite-plugin-top-level-await

yarn add -D vite-plugin-top-level-await

vite.config.ts

import topLevelAwait from "vite-plugin-top-level-await";

export default defineConfig({
  plugins: [
    topLevelAwait({
      // The export name of top-level await promise for each chunk module
      promiseExportName: "__tla",
      // The function to generate import names of top-level await promise in each chunk module
      promiseImportName: i => `__tla_${i}`
    })
  ]
});

这个插件的作用如下：

before

import { a } from "./a.js"; // This module uses top-level await
import { b } from "./b.js"; // This module uses top-level await too
import { c } from "./c.js"; // This module does NOT use top-level await

const x = 1;
await b.func();
const { y } = await somePromise;

export { x, y };

after

import { a, __tla as __tla_0 } from "./a.js"; // This module uses top-level await
import { b, __tla as __tla_1 } from "./b.js"; // This module uses top-level await too
import { c } from "./c.js"; // This module does NOT use top-level await

// Original exported variables
let x, y;

// Await imported TLA promises and execute original top-level statements
let __tla = Promise.all([
  (() => { try { return __tla_0; } catch {} })(),
  (() => { try { return __tla_1; } catch {} })()
]).then(async () => {
  // Transform exported variables to assignments
  x = 1;

  await b.func();

  // Destructing patterns (and function / class declarations as well) are handled correctly
  ({ y } = await somePromise);
});

// Export top-level await promise
export { x, y, __tla };

参考

vite-plugin-top-level-await