Svelte应用因可选链语法错误在移动端浏览器运行失败排查

• 基于Vite构建的Svelte应用，桌面端Chrome、Edge浏览器运行无异常
• 执行pnpm dev --host启动开发服务后，移动设备（含Android模拟器、实体iPhone）访问时应用无法加载
• 错误截图：
  
• 已尝试操作：将tsconfig.json中target修改为ES2015，但浏览器加载的.svelte文件代码无变化，问题未解决
• 初步判断：可选链?.nickname等ES语法在移动端浏览器存在兼容问题，Vite未在开发模式下转译适配低版本移动端浏览器

tsconfig.json的target配置仅作用于TypeScript自身的类型检查与编译输出，Vite不会读取该配置决定代码转译规则。且Vite开发模式优先保障热更新速度，默认仅对支持原生ES模块的现代浏览器做最低程度转译，部分版本偏旧的移动端浏览器（比如iOS 13.4以下的Safari、版本低于80的安卓WebView）不在默认兼容范围内，这些环境不原生支持ES2020的可选链语法，就会直接报语法错误导致应用加载失败。

• 第一步：核对移动端浏览器版本
  先确认测试设备的浏览器/WebView版本：可选链?.的原生支持起点是iOS Safari 13.4、Chrome 80、安卓WebView 80，如果版本高于这个阈值仍然报错，优先检查网络连通性、端口防火墙、访问地址是否为局域网IP而非localhost、浏览器是否缓存了旧资源。
• 第二步：修改Vite配置强制开发模式做语法转译
  打开项目根目录的vite.config.js/ts，添加如下配置，指定转译目标为ES2015，同时让依赖预构建也遵循该目标：

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

• 第三步：配置legacy插件做兼容兜底
  如果上述配置修改后仍有兼容问题，安装Vite官方的legacy插件做全量语法降级和polyfill注入：
  1. 安装依赖：

  pnpm add -D @vitejs/plugin-legacy
  

  2. 在Vite配置中引入插件，指定需要兼容的移动端版本范围：

  import legacy from '@vitejs/plugin-legacy'
  
  export default defineConfig({
    plugins: [
      svelte(),
      legacy({
        targets: ['iOS >= 12', 'Android >= 6', 'Chrome >= 60'],
        renderLegacyChunks: true,
        modernPolyfills: true
      })
    ]
  })
  

• 第四步：验证配置生效
  修改配置后完全重启pnpm dev服务，清除移动端浏览器缓存后重新访问，查看加载的JS资源里是否已经把?.可选链转译为ES5兼容的判空写法，确认语法错误消失。

补充说明：如果是生产构建，Vite默认会按build.target做语法降级，这类兼容问题基本只会在开发模式下出现。如果是使用SvelteKit而非纯Svelte+Vite脚手架，还需要同步修改svelte.config.js中路由、预渲染相关的兼容配置，不能只修改Vite配置。

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