fix: 优化浏览器兼容策略

This commit is contained in:
landaiqing
2024-05-06 01:00:14 +08:00
parent 564ff40406
commit feb965b11d
3 changed files with 188 additions and 164 deletions

27
.babelrc.json Normal file
View File

@@ -0,0 +1,27 @@
{
"plugins": [
[
"@babel/plugin-transform-runtime",
{
"corejs": 3
}
]
],
"presets": [
[
"@babel/preset-env",
{
"targets": {
"ie": "11",
"chrome": "58",
"safari": "11.1",
"firefox": "63",
"edge": "16"
},
"corejs": 3,
"useBuiltIns": "usage",
"modules": false
}
]
]
}

View File

@@ -6,8 +6,8 @@ import routeConfig from './router'
import 'virtual:svg-icons-register'
import { Provider as MobxProvider } from 'mobx-react'
import { RootStore } from '@/store'
import 'core-js/stable'
import 'regenerator-runtime/runtime'
import 'core-js';
import 'regenerator-runtime/runtime';
const router = createBrowserRouter(routeConfig)
ReactDOM.createRoot(document.getElementById('root')!).render(
// <React.StrictMode>

View File

@@ -1,32 +1,49 @@
import { defineConfig, loadEnv } from 'vite'
import {defineConfig, loadEnv} from 'vite'
import react from '@vitejs/plugin-react'
import { resolve } from 'path'
import {resolve} from 'path'
// icons plugin
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import {createSvgIconsPlugin} from 'vite-plugin-svg-icons'
import * as path from 'path'
import imagemin from 'unplugin-imagemin/vite'
import viteCompression from 'vite-plugin-compression'
import { createHtmlPlugin } from 'vite-plugin-html'
// import legacy from '@vitejs/plugin-legacy'
import { babel } from '@rollup/plugin-babel'
import {createHtmlPlugin} from 'vite-plugin-html'
import legacy from '@vitejs/plugin-legacy'
import postcssPresetEnv from 'postcss-preset-env'
import autoprefixer from 'autoprefixer'
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-expect-error
//配置参数
export default defineConfig(({ mode }) => {
export default defineConfig(({mode}) => {
const env = loadEnv(mode, process.cwd())
return {
base: '/',
plugins: [
react(),
// legacy({
// targets: ['ie >= 11', 'chrome 52', 'Chrome > 70', 'Safari 12.1', 'ios >= 12.3'],
// additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
// renderLegacyChunks: true,
// polyfills: ['es.promise.all-settled', 'es.object.entries'],
// modernPolyfills: ['es.promise.all-settled', 'es.object.entries'],
// }),
legacy({
targets: ['ie >= 11', 'chrome 52', 'Chrome > 70', 'Safari 12.1', 'last 2 versions and since 2018 and > 0.5%', 'iOS >= 9','Android >= 4.4','last 2 versions'],
additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
renderLegacyChunks: true,
polyfills: [
'es.promise.all-settled',
'es.symbol',
'es.array.filter',
'es.promise',
'es.promise.finally',
'es/map',
'es/set',
'es.array.for-each',
'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'
],
modernPolyfills: ['es.promise.all-settled', 'es.object.entries', 'es.string.replace-all'],
}),
// 修改 icons 相关配置
createSvgIconsPlugin({
// 指定需要缓存的图标文件夹
@@ -54,9 +71,9 @@ export default defineConfig(({ mode }) => {
},
},
conversion: [
{ from: 'jpeg', to: 'webp' },
{ from: 'png', to: 'webp' },
{ from: 'JPG', to: 'jpeg' },
{from: 'jpeg', to: 'webp'},
{from: 'png', to: 'webp'},
{from: 'JPG', to: 'jpeg'},
],
}),
viteCompression({
@@ -137,26 +154,6 @@ export default defineConfig(({ mode }) => {
brotliSize: true, // 启用 brotli 压缩大小报告
chunkSizeWarningLimit: 2000, // chunk 大小警告的限制
watch: null, // 设置为 {} 则会启用 rollup 的监听器
rollupOptions: {
plugins: [
// https://www.npmjs.com/package/@rollup/plugin-babel
babel({
babelHelpers: 'bundled',
presets: [
[
'@babel/preset-env',
{
useBuiltIns: 'entry', // 注意这里只能使用 entry
corejs: '3',
targets: 'last 2 versions and not dead, > 0.2%, Firefox ESR',
},
],
],
plugins: [],
compact: false,
}),
],
},
},
server: {
proxy: {