Vite - 兼容旧版浏览器 plugin-legacy（1）

1，原理

当使用了新的 js 特性时，为了兼容一些传统浏览器，通常会使用 babel 做降级处理。

比如通过 vue-cli 创建的项目中，会配置 babel 插件来解决：

// babel.config.js
module.exports = {presets: ['@vue/cli-plugin-babel/preset', '@babel/preset-env'],plugins: ['@babel/plugin-transform-runtime']
}

而 babel 做降级处理的依据，是通过 browserslist 查询出需要支持的浏览器列表。

所以还需要在 .browserslistrc 配置文件，或是 package.json 中的 browserslist 字段中增加相关配置：

"browserslist": ["> 1%","last 2 versions","not dead","not ie 11","ios >= 9"
],

2，Vite 的配置

plugin-legacy 官方文档

在 vite 中，通过插件将 babel 进行集成。

// vite.config.ts
import { defineConfig } from 'vite'
import legacy from '@vitejs/plugin-legacy'export default defineConfig({plugins: [legacy()]
})

这样打包后的 js 中，会多一份做了降级处理的（legacy）js。

配置项 targets

legacy() 可以传递配置项，一般使用默认的就够了。

配置项 targets 的默认值是 'last 2 versions and not dead, > 0.3%, Firefox ESR'。

该配置项，
如果显式指定了，则会在渲染打包后的降级处理的 js 时，传递给 babel 的 presets：@babel/preset-env。
如果使用的是默认值，则将默认值传递给 .browserslistrc 配置文件。

举例：

legacy({targets: ['defaults', 'not IE 11']
})

3，原理

参考文章

---

以上。