vite兼容chrome48的方法

chrome48不支持async await语法，但有些桌面客户端的内嵌浏览器就是chrome48,如下操作即可兼容

当前环境：2023-2-3使用npm create vite@latest创建

开始兼容操作 

安装vite推荐的 @vitejs/plugin-legacy

文档官网 https://github.com/vitejs/vite/tree/main/packages/plugin-legacy

插件 | Vite 官方中文文档

npm i @vitejs/plugin-legacy -D

polyfills数组也很重要，经过实测发现，如果引入axios,chrome48会有Object.entries is undefined的错误，新增如下代码即可

'es.object.entries',
'es.object.from-entries',
'esnext.object.iterate-entries',

完整vite.config.js配置如下 

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import legacy from '@vitejs/plugin-legacy'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    legacy({
      targets: ['chrome 48'],
      additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
      renderLegacyChunks: true,
      polyfills: [
        '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',
     'es.object.entries',
        'es.object.from-entries',
        'esnext.object.iterate-entries',
      ],
    }),
  ],
  optimizeDeps: {
    // include: ['aa/a.js'],
  },
  base: './',
  build: {
    minify: false,

    target: 'es2015',
  },
})

polyfills值参考地址

UNPKG - core-jsThe CDN for core-jshttps://unpkg.com/browse/core-js@3.27.2/ 

UNPKG - core-jsThe CDN for core-jshttps://unpkg.com/browse/core-js@3.27.2/modules/

 最后如果npm run build打包时出现如下错误

 terser has become an optional dependency

 那么需要安装一次terser即可解决问题

npm i  terser --legacy-peer-deps