Astro项目用@vitejs/plugin-legacy构建时转译异步生成器函数失败，如何解决？

为了让网站支持旧浏览器，使用@vitejs/plugin-legacy插件时，构建过程中出现报错，提示无法转换异步生成器函数到目标环境：

[vite:esbuild-transpile] Transform failed with 9 errors:
entry.mjs:551:0: ERROR: Transforming async generator functions to the configured target environment ("chrome64", "edge79", "es2020", "firefox67", "safari11.1" + 2 overrides) is not supported yet
entry.mjs:683:2: ERROR: Transforming async generator functions to the configured target environment ("chrome64", "edge79", "es2020", "firefox67", "safari11.1" + 2 overrides) is not supported yet
entry.mjs:696:0: ERROR: Transforming async generator functions to the configured target environment ("chrome64", "edge79", "es2020", "firefox67", "safari11.1" + 2 overrides) is not supported yet
entry.mjs:1256:2: ERROR: Transforming async generator functions to the configured target environment ("chrome64", "edge79", "es2020", "firefox67", "safari11.1" + 2 overrides) is not supported yet
entry.mjs:1295:0: ERROR: Transforming async generator functions to the configured target environment ("chrome64", "edge79", "es2020", "firefox67", "safari11.1" + 2 overrides) is not supported yet
...

Transforming async generator functions to the configured target environment ("chrome64", "edge79", "es2020", "firefox67", "safari11.1" + 2 overrides) is not supported yet
548|  function markHTMLBytes(bytes) {
549|    return new HTMLBytes(bytes);
550|  }
   |    ^
551|  async function* unescapeChunksAsync(iterable) {
   |  ^
552|    for await (const chunk of iterable) {

Transforming async generator functions to the configured target environment ("chrome64", "edge79", "es2020", "firefox67", "safari11.1" + 2 overrides) is not supported yet
681|      return "AstroComponent";
682|    }
683|    async *[Symbol.asyncIterator]() {
   |    ^
684|      const { htmlParts, expressions } = this;
685|      for (let i = 0; i < htmlParts.length; i++) {

Transforming async generator functions to the configured target environment ("chrome64", "edge79", "es2020", "firefox67", "safari11.1" + 2 overrides) is not supported yet
693|  function isRenderTemplateResult(obj) {
694|    return typeof obj === "object" && !!obj[renderTemplateResultSym];
695|  }
   |    ^
696|  async function* renderAstroTemplateResult(component) {
   |  ^
697|    for await (const value of component) {

Transforming async generator functions to the configured target environment ("chrome64", "edge79", "es2020", "firefox67", "safari11.1" + 2 overrides) is not supported yet
1254|      return this.returnValue;
1255|    }
1256|    async *render() {
   |    ^
1257|      if (this.returnValue === void 0) {
1258|        await this.init();

Transforming async generator functions to the configured target environment ("chrome64", "edge79", "es2020", "firefox67", "safari11.1" + 2 overrides) is not supported yet
1292|    return typeof obj === "object" && !!obj[astroComponentInstanceSym];
1293|  }
1294|  
   |   ^
1295|  async function* renderChild(child) {
   |  ^
1296|    child = await child;

Transforming async generator functions to the configured target environment ("chrome64", "edge79", "es2020", "firefox67", "safari11.1" + 2 overrides) is not supported yet
1987|    }
1988|    if (!hydration) {
1989|      return async function* () {
   |             ^
1990|        if (slotInstructions) {
1991|          yield* slotInstructions;

Transforming async generator functions to the configured target environment ("chrome64", "edge79", "es2020", "firefox67", "safari11.1" + 2 overrides) is not supported yet
2029|      island.props["await-children"] = "";
2030|    }
2031|    async function* renderAll() {
   |    ^
2032|      if (slotInstructions) {
2033|        yield* slotInstructions;

Transforming async generator functions to the configured target environment ("chrome64", "edge79", "es2020", "firefox67", "safari11.1" + 2 overrides) is not supported yet
2086|    const children = item.children;
2087|    return index === all.findIndex((i) => JSON.stringify(i.props) === props && i.children == children);
2088|  };
   |     ^
2089|  async function* renderExtraHead(result, base) {
   |  ^
2090|    yield base;

Transforming async generator functions to the configured target environment ("chrome64", "edge79", "es2020", "firefox67", "safari11.1" + 2 overrides) is not supported yet
2111|    return renderAllHeadContent.bind(null, result);
2112|  }
2113|  const renderHead = createRenderHead;
   |                                       ^
2114|  async function* maybeRenderHead(result) {
   |  ^
2115|    if (result._metadata.hasRenderedHead) {

 error   Transforming async generator functions to the configured target environment ("chrome64", "edge79", "es2020", "firefox67", "safari11.1" + 2 overrides) is not supported yet
  File:
    entry.mjs

• 调整目标环境版本：提升目标浏览器版本到原生支持异步生成器函数的范围。比如Chrome 63+、Safari 12.1+、Firefox 55+已原生支持该语法，修改@vitejs/plugin-legacy的配置：

  import legacy from '@vitejs/plugin-legacy';
  
  export default {
    plugins: [
      legacy({
        targets: ['chrome63', 'edge79', 'firefox55', 'safari12.1'],
      }),
    ],
  };
  

• 切换转译工具：esbuild暂不支持将异步生成器转译为更低版本语法，可改用Babel处理：
  1. 安装依赖：npm install @babel/core @babel/plugin-transform-async-generator-functions @vitejs/plugin-babel --save-dev
  2. 修改Vite配置，启用Babel并禁用esbuild转译：

     import legacy from '@vitejs/plugin-legacy';
     import babel from '@vitejs/plugin-babel';
     
     export default {
       plugins: [
         babel({
           plugins: ['@babel/plugin-transform-async-generator-functions'],
           include: ['**/*.mjs', '**/*.js'],
         }),
         legacy({
           targets: ['chrome64', 'edge79', 'firefox67', 'safari11.1'],
           esbuild: false,
         }),
       ],
     };
     

• 升级Astro版本：尝试将Astro更新到最新稳定版，新版本可能已修复旧浏览器兼容的转译问题。

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