Svelte应用Chrome兼容性求助：适配84以下旧版本Chrome

• 调整编译与转译配置
  用svelte-preprocess配合Babel指定兼容目标。先安装@babel/preset-env和svelte-preprocess，然后在svelte.config.js里配置要兼容的Chrome版本，比如Chrome 70：

  // svelte.config.js
  import preprocess from 'svelte-preprocess';
  
  export default {
    preprocess: preprocess({
      babel: {
        presets: [
          ['@babel/preset-env', {
            targets: { chrome: '70' },
            useBuiltIns: 'usage',
            corejs: 3
          }]
        ]
      }
    })
  };
  

  这会自动把ES6+语法转成低版本能识别的代码，还会按需引入Polyfill。

• 补充必要的Polyfill
  要是某些API没被自动覆盖，直接在项目入口文件（比如src/main.js）顶部导入：

  import 'core-js/stable';
  import 'regenerator-runtime/runtime';
  // 低版本Chrome不支持Fetch的话加这个
  import 'whatwg-fetch';
  

• 替换不兼容的语法和API
  排查代码里的高版本特性，比如可选链?.、空值合并??，要么靠Babel转译，要么手动改成兼容写法：

  • 把obj?.prop换成obj && obj.prop
  • 把a ?? b换成a != null ? a : b
    CSS方面，比如Grid布局给旧版Chrome加-webkit-前缀，或者准备降级的布局方案。

• 调整构建工具目标
  用Vite的话，在vite.config.js里设置build.target为对应ES版本，比如兼容Chrome 70设为'es2019'：

  // vite.config.js
  import { sveltekit } from '@sveltejs/kit/vite';
  import { defineConfig } from 'vite';
  
  export default defineConfig({
    plugins: [sveltekit()],
    build: {
      target: 'es2019'
    }
  });
  

  用Rollup就配合@rollup/plugin-babel，配置和上面的Babel规则一致就行。

• 验证兼容效果
  用Chrome开发者工具的「设备模拟器」切换到旧版本测试，或者本地装对应版本的Chrome直接跑应用，揪出剩下的问题。

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