Vite 拒绝在我的 Svelte / TS 项目中使用正确的构建目标

Question

我正在使用 THREE.js、Svelte、Typescript 和 Vite 创建一个网站。当我尝试测试新的 THREE.js 功能（WebGPURenderer）时，我在构建步骤中遇到以下错误：

[错误]顶级等待在配置的目标环境中不可用（“chrome87”，“edge88”，“es2020”，“firefox78”，“safari14”+ 2个覆盖）

看起来这个新功能正在使用顶级等待

我尝试在两个不同的文件中将构建目标设置为“es2022”（支持顶级等待），但我不断收到相同的错误：

顶级等待在配置的目标环境中不可用（“chrome87”，“edge88”，“es2020”，“firefox78”，“safari14”+ 2个覆盖）

vite.config.js

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

export default defineConfig({
  build: {
    target: "es2022"
  },
  esbuild: {
    supported: {
      'top-level-await': true
    },
  },
  plugins: [svelte()],
});

tsconfig.json

{
  "extends": "@tsconfig/svelte/tsconfig.json",
  "compilerOptions": {
    "target": "ES2022",
    "useDefineForClassFields": true,
    "module": "ES2022",
    "resolveJsonModule": true,
    "strict": true,
    "allowJs": true,
    "checkJs": true,
    "isolatedModules": true
  },
  "include": [
    "src/**/*.d.ts",
    "src/**/*.ts",
    "src/**/*.js",
    "src/**/*.svelte"
  ],
  "references": [
    {
      "path": "./tsconfig.node.json"
    }
  ]
}

Answer 1

在 vite.config.js 中添加以下代码：

  export default defineConfig({
      enter code here`plugins: [vue()],
      build:{
       target: "esnext" // or "es2019",

      }
    }

Answer 2

通过添加以下选项更新 vite.config.js 文件：

{
...
  build: {
    target: "es2022"
  },
  esbuild: {
    target: "es2022"
  },
  optimizeDeps:{
    esbuildOptions: {
      target: "es2022",
    }
  }
}

Answer 3

这有效-->

{
...
  build: {
    target: "es2022"
  },
  esbuild: {
    target: "es2022"
  },
  optimizeDeps:{
    esbuildOptions: {
      target: "es2022",
    }
  }
}