ECMAScript 提案 Top-level await 由 Myles Borins 提出,它可以让你在模块的最高层中使用 await 操作符。在这之前,你只能通过在 async 函数或 async generators 中使用 await 操作符。Top-level await 是个新特性,打包不支持此特性。
所以在 js 文件中直接写 await,在打包时会报错:
Top-level await is not available in the configured target environment, “edge88”, “es2019”, “firefox78”, “safari13.1”) |
# 解决方法:
# 1. 引入 vite-plugin-top-level-await
npm install vite-plugin-top-level-await -D |
# 2. 在 vite.config.js 配置此插件
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}` | |
}) | |
] | |
}); |
# 3. 问题:
vite 打包,pdfjs-dist 报错 import 引入 pdfjs-dist 报错 Top-level await is not available、No "GlobalWorkerOptions.workerSrc" 等
原因也是:vite 不支持顶级的 async/await 语法,需要安装插件做兼容