Vite打包浏览器兼容

一、问题描述

vite+vue3项目开发完以后，你会发现打包后的项目运行在新版浏览器可以正常显示，但运行在一些版本比较老的浏览器如 Chrome < 23、Firefox < 21和IE等浏览器上时显示一片空白，并且没有任何的错误提示。

二、问题分析

此时你的大脑可能跟页面一样也是一片空白，但是不要慌，我们先分析一下产生这个问题的可能的原因：那些版本较低的浏览器不支持ES6的语法和新API，而Babel默认只转换新的JavaScript句法，不转换新的API，比如Proxy、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法都不会转码。

三、解决方案

Plan A：在vite.config.js中配置浏览器的兼容性。

我们项目是用vite搭建的，因此我首先想到了使用vite自带的API去配置浏览器兼容性。
配置build.target和buid.cssTarget

  build: {
      target: ['chrome52'],
      cssTarget: ["chrome52"],
      }

打包并运行到浏览器后发现还是一片空白，查看打包生成的文件，发现里面依然有const、Promise等新语法和API，并没有为我们转换。Plan A ,No.

Plan B：先配置TypeScript转换语法，然后再让vite兼容目标。

在tsconfig.json文件内配置target为”es5”，然后开始打包。
打包时报错：error: Transforming const to the configured target environment (“es5”) is not supported yet
错误信息大抵在告诉我们：代码中有const等目标环境不支持的语法，并且它目前还不支持将const转换为目标环境"es5"。嗯这就有点意思了。Plan B, NO.

Plan C：引入babel-polyfill环境垫片

上面转换语法的方案失败后，我尝试给浏览器环境请一个外援：babel-polyfill，让它来做那些低版本浏览器环境做不到的事情。
什么是polyfill？官方的解释是：“用于实现浏览器不支持原生功能的代码”，我们可以简单理解为polyfill可以在当前运行环境中模拟出那些当前环境不支持的API，它为我们的当前环境提供了一个垫片，我们可以在这个垫片上使用新API。

首先我们先安装babel-polyfill：

npm install --save babel-polyfill

然后在main.js里引入它：

import ‘babel-polyfill'

然后我们重新打包、启动、运行到浏览器，有些伙伴到这一步可能就成功了，但我的仍然是一片空白！
慌不慌？你说慌不慌，慌！我也觉得慌，为什么？网上那么多人用这个方法成功了，但我们失败了，这能不慌？ Plan C，No！

Plan D：使用@vitejs/plugin-legacy插件

以上三个方案失败后，我又重新回归到vite这一块，在vite官方文档中我找到了vite自带插件库，并且在插件库中找到了一个关于浏览器兼容支持的插件：@vitejs/plugin-legacy
首先安装插件：npm i @vitejs/plugin-legacy -D

然后在vite.config.js中配置

import legacyPlugin from '@vitejs/plugin-legacy'
export default defineConfig( {
    plugins: [
        legacyPlugin({
            targets:['chrome 52'],  // 需要兼容的目标列表，可以设置多个
            additionalLegacyPolyfills:['regenerator-runtime/runtime'] // 面向IE11时需要此插件
        })
    ]
})

打包、运行到浏览器。

新版本浏览器运行正常！旧版本浏览器运行正常！Plan D，yes！

以下是@vitejs/plugin-legacy插件的简单介绍：
插件默认行为：
1.使用@babel/preset-env转换，为包中的每个块生成相应的遗留块。
2.生成一个包含 SystemJS 运行时的 polyfill 块。
3.使用

打包后的变化：

• 启用插件后打包完成的目录多出了一些带有legacy字样的文件，每个js脚本文件都有一个与其对应的遗留版本。
• html文件中新增了一些脚本，这些脚本根据浏览器的支持程度来动态的引入正常版本文件还是带有legacy字样的遗留版本文件。
• 此时当项目运行在一些版本较低的浏览器时，插件添加的脚本会自动加载legacy版本的文件。

四、过程中遇到的其他问题

在Plan D成功在低版本浏览器运行以后，发现有一些CSS样式显示不正常，随后确认是重写Vant的CSS变量没有生效。
刚开始认为是CSS在打包时没有做好兼容处理，然后就折腾了一番CSS的兼容支持。css解释器、postcss插件和vite配置css目标环境都没用。

后面就没有什么思路了，后来想起来在vite.config.js配置中有一个关于样式按需加载的插件：

此时就想是不是这个插件影响到了我的CSS的正常效果，当我把它移除并重新打包运行后，样式就回归正常了，看来确实是被它影响的。
使用这个按需加载的插件后，当页面加载时，它会根据它的一些规则去判断当前需要加载哪些样式文件，哪些不需要加载。在加载这些样式文件时，如果样式文件里有我们自定义全局样式重名的，那么根据css规则，我们自定义过的全局样式会被覆盖掉。
在本次的案例中，我们重写了Vant组件的部分变量，并全局引入了。在打开包含这些变量的页面时，按需加载插件此时才会加载Vant的样式文件，我们在全局重写的变量又被重写了，因此重写的全局变量没有生效。