解决vite打包项目在safari浏览器 15.1版本中无法使用

590 阅读1分钟

4eace369475dc5159fb7a9df1cc4abc.png

解决办法:

` vite.config.ts

import legacy from '@vitejs/plugin-legacy'
export default defineConfig({
    ...,
    plugins: [
        legacy({
            modernPolyfills: true,  // 这里设置true,所有版本浏览器中均加载 polyfills
            polyfills: [
                'es.symbol',
                'es.array.filter',
                'es.promise',
                'es.promise.finally',
                'es/map',
                'es/set',
                'es.array.for-each',
                'es.array.at',
                'es.object.define-properties',
                'es.object.define-property',
                'es.object.get-own-property-descriptor',
                'es.object.get-own-property-descriptors',
                'es.object.keys',
                'es.object.to-string',
                'web.dom-collections.for-each',
                'esnext.global-this',
                'esnext.string.match-all'
            ]
        })
    ]
})

`

问题:

所有浏览器都加载polyfills会增加打包后项目的大小, 使用@vitejs/plugin-legacy本意是在不知道模块化的浏览器中加载polyfills

目前vite@4.0.4版本中打包最低支持到es6,safari 15.1中不支持es6但是支持模块化,所以不设置modernPolyfills:true是不起作用的