在 Vite 中构建我的项目时出现错误 - 顶级等待在配置的目标环境中不可用

Question

我尝试在 vite 中构建我的项目，

我的项目 - https://github.com/yakovcohen4/starbucks-openlayers

我跑步npm run dev和工作。

但是当我运行构建它时出现错误。

错误信息： Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2019", "firefox78", "safari13.1")

我尝试获取数据并认为这是问题链接（第22+23行） - https://github.com/yakovcohen4/starbucks-openlayers/blob/main/starbucks-project/src/main.ts

const shopsData = await fetchStarbucksShops();

如果有人遇到这个诅咒我很乐意提供帮助

Answer 1

Top-level-await 是一项新的 es 功能，无法在旧浏览器中运行。如果您相信您的用户使用相对较新的版本并且可以处理顶级等待，您可以像这样设置 vite.config：

export default defineConfig({
  build: {
    target: 'esnext' //browsers can handle the latest ES features
  }
})

或者

export default defineConfig({
  esbuild: {
    supported: {
      'top-level-await': true //browsers can handle top-level-await features
    },
  }
})

Answer 2

对于那些在 dev 和 build 命令中遇到相同问题的人，请添加以下内容

// vite.config.js
optimizeDeps: {
   esbuildOptions: {
     target: 'esnext'
   }
 },
 build: {
   target: 'esnext'
 }

Answer 3

首先，检查一下； https://github.com/vitejs/vite/issues/6985。如果您找不到答案，请尝试创建一个大型异步函数，该函数会自行执行以降低您的 ; 的级别await。

    (async () => {
    export const shopsData: shopType[] = await fetchStarbucksShops();
    export const countryGeoData: countryGeoDataType = await fetchGeoJsonCountry();
    .
    .
    .
    .
    .
     })();

这可能行不通。您应该以某种方式避免顶级等待，无论是在函数await内部使用async，还是使用.then()