老旧Electron（Chrome v69）中TypeScript+Vite出现Unexpected token错误

核心原因 #

Chrome 69（对应Electron 4.x版本）不支持部分ES2018+语法特性，比如可选链操作符（?.）、**空值合并操作符（??）**或类字段声明等语法，即便添加了polyfill，也需要确保转译工具完全覆盖这些不兼容语法。

具体修复步骤 #

• 配置Vite转译目标
  在vite.config.ts中明确指定转译目标为Chrome 69，让Vite自动处理不兼容语法：

  import { defineConfig } from 'vite'
  import vue from '@vitejs/plugin-vue'
  
  export default defineConfig({
    plugins: [vue()],
    build: {
      target: 'chrome69'
    },
    optimizeDeps: {
      esbuildOptions: {
        target: 'chrome69'
      }
    }
  })
  

• 补充Babel转译（若Vite的esbuild覆盖不全）
  先安装依赖：

  npm install @babel/core @babel/preset-env @babel/preset-typescript @vitejs/plugin-babel --save-dev
  

  修改vite.config.ts添加Babel插件：

  import { defineConfig } from 'vite'
  import vue from '@vitejs/plugin-vue'
  import babel from '@vitejs/plugin-babel'
  
  export default defineConfig({
    plugins: [
      vue(),
      babel({
        babelHelpers: 'bundled',
        presets: [
          ['@babel/preset-env', {
            targets: { chrome: '69' },
            useBuiltIns: 'usage',
            corejs: 3
          }],
          '@babel/preset-typescript'
        ]
      })
    ]
  })
  

  创建babel.config.json配置文件：

  {
    "presets": [
      ["@babel/preset-env", {
        "targets": { "chrome": "69" },
        "useBuiltIns": "usage",
        "corejs": 3
      }],
      "@babel/preset-typescript"
    ]
  }
  

• 手动替换不兼容语法
  排查代码中Chrome 69不支持的写法，替换为兼容语法：

  • 可选链obj?.prop → obj && obj.prop
  • 空值合并a ?? b → a != null ? a : b
  • 类字段声明（class Test { prop = 'val' }）→ 改为构造函数中初始化：

    class Test {
      prop: string;
      constructor() {
        this.prop = 'val';
      }
    }
    

验证修复 #

重新构建项目，通过Blink.jl启动Electron实例，确认Unexpected Token错误消失。

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