vite safari 14 适配问题

问题跟踪

1. 编译产物bootstrap-xxxxx.js中在顶层作用域使用了await语句

2. 这种使用方式的从 safari 15 开始兼容：

解决方法1 vite-plugin-top-level-await

解决了 await 的报错，但是产生了别的报错

import topLevelAwait from 'vite-plugin-top-level-await';


plugins: [
    topLevelAwait({
        // The export name of top-level await promise for each chunk module
        promiseExportName: '__tla',
        // The function to generate import names of top-level await promise in each chunk module
        promiseImportName: i => `__tla_${i}`,
    }),
]

最终方案 vite-plugin-commonjs + target

• 由于不知道target的兼容语法，使用browserslist-to-esbuild做了一次转换
• 最初想兼容到safari11，但是出现了难以解决的报错，所以降级为兼容到safari14了

import { viteCommonjs, esbuildCommonjs } from '@originjs/vite-plugin-commonjs';


plugins: [
    topLevelAwait({
        // The export name of top-level await promise for each chunk module
        promiseExportName: '__tla',
        // The function to generate import names of top-level await promise in each chunk module
        promiseImportName: i => `__tla_${i}`,
    }),
    viteCommonjs(),
]
optimizeDeps: {
    esbuildOptions: {
        target: 'esnext',
        target: ['es2020', 'safari14'],
        plugins: [esbuildCommonjs()],
    },
},
build: {
    target: 'esnext',
    target: ['es2020', 'safari14'],
}