我是如何在低版本浏览器中运行Vite启动的项目的?

前言

众所周知,Vite 已然占据 web 开发的半壁江山。

无论是 Vue 项目还是 React 项目,我都习惯使用 Vite 去开发构建。

但是,有个问题一直困扰着我,那就是,项目需要兼容 Chrome 72 版本的浏览器,虽然采用了 @vitejs/plugin-legacy插件做兼容,但是此插件只在build阶段生效,serve阶段不生效,这就导致项目只能在高版本浏览器中开发,项目的兼容性问题,我无法在开发阶段发现。

基于此,我决定研究下怎么在低版本浏览器中运行Vite启动的项目。

前提

先来了解下 Vite,官网描述如下:

Vite 是一种新型前端构建工具,能够显著提升前端开发体验。它主要由两部分组成:

由此可知,开发环境下,Vite 是依赖于原生ES模块的,即浏览器必须支持importexport语法,否则,Vite将无法运行,

来看下原生ES模块的兼容性:

结论如下:

  • Chrome >= 63
  • Edge >= 79
  • Safari >= 11.1
  • FireFox >= 67
  • Opera >= 50
  • IE 全系不支持

我的电脑上现有 Chrome 72 版本的浏览器,满足条件,那就拿它来测试吧。

兼容方案

寻找插件

首先查看下社区是否有可用的兼容插件,发现如下插件:

第一个 看了下 github,标星 35,有点不太靠谱。

再看第二个,官方插件,稳定性还是值得肯定的,就你了。

项目添加低版本浏览器不支持的语法

在项目中添加当前浏览器不支持的语法,使其无法在chrome72版本的浏览器上正常打开。可选链运算符 是个不错的方案,该语法在chrome >= 80 上才支持,满足条件。

启动项目,查看报错

启动下项目,并在chrome 72 版本打开,确实报错了,报错信息如下:可以看到确实是 可选链运算符 语法报错了。符合预期。

兼容

首先安装 @rollup/plugin-babel 和 预设兼容包 @babel/preset-env

bash 复制代码
pnpm i @rollup/plugin-babel @babel/preset-env -D

在 Vite 插件中使用该插件

typescript 复制代码
import { defineConfig } from 'vite';
import babel from '@rollup/plugin-babel';

export default defineConfig({
  plugins: [
    babel({
        include: [/\.vue$/, /\.ts$/, /\.tsx$/, /\.jsx$/, /\.js$/],
        presets: [
          [
            '@babel/preset-env',
            {
              useBuiltIns: 'usage',
              corejs: 3,
              targets: {
                chrome: '72',
              },
              modules: false,
            },
          ],
        ],
      }),
  ],
});

使用 @babel/preset-env 做兼容,下面解释下它配置项:

  • useBuiltIns: 'usage': 遇到不兼容的语法时,引入对应的polyfill
  • corejs: core-js 使用 3 版本,具体参考 这里
  • targets: 兼容列表
  • modules: 不要转换代码中的ES module语法

配置还挺简单的,启动下看看吧。

还是报错,报错信息和上边的一致,

难道,这个插件没有生效吗?

抱着怀疑的态度,我又去看了下插件的说明文档,发现在babel配置项之外,插件还提供了几个额外的配置项,其中有一个这样的配置项:

是不是应该将我需要转译的 .Vue .ts 等扩展名显示声明呢?试一试:

添加配置如下:

typescript 复制代码
import { defineConfig } from 'vite';
import babel from '@rollup/plugin-babel';

export default defineConfig({
  plugins: [
    babel({
        include: [/\.vue$/, /\.ts$/, /\.tsx$/, /\.jsx$/, /\.js$/],
        extensions: ['.vue', '.ts', '.js', '.tsx', '.jsx'], // 添加此行
        presets: [
          [
            '@babel/preset-env',
            {
              useBuiltIns: 'usage',
              corejs: 3,
              targets: {
                chrome: '72',
              },
              modules: false,
            },
          ],
        ],
      }),
  ],
});

启动试试,项目启动成功!!

总结

本文主要讲解了如何使用 @rollup/plugin-babel 插件使 Vite 项目在开发时运行在低版本浏览器中,其中关键点是 插件提供的 extensions 配置项,需要显示声明需要转换的文件后缀名。

相关推荐
CCF_NOI.1 小时前
谷歌浏览器深入用法全解析:解锁高效网络之旅
大数据·运维·服务器·前端·计算机·谷歌
paopaokaka_luck4 小时前
基于SpringBoot+Uniapp的健身饮食小程序(协同过滤算法、地图组件)
前端·javascript·vue.js·spring boot·后端·小程序·uni-app
患得患失9495 小时前
【前端】【vscode】【.vscode/settings.json】为单个项目配置自动格式化和开发环境
前端·vscode·json
飛_5 小时前
解决VSCode无法加载Json架构问题
java·服务器·前端
YGY Webgis糕手之路7 小时前
OpenLayers 综合案例-轨迹回放
前端·经验分享·笔记·vue·web
90后的晨仔8 小时前
🚨XSS 攻击全解:什么是跨站脚本攻击?前端如何防御?
前端·vue.js
Ares-Wang8 小时前
JavaScript》》JS》 Var、Let、Const 大总结
开发语言·前端·javascript
90后的晨仔8 小时前
Vue 模板语法完全指南:从插值表达式到动态指令,彻底搞懂 Vue 模板语言
前端·vue.js
德育处主任8 小时前
p5.js 正方形square的基础用法
前端·数据可视化·canvas