关于Browserlist浏览器支持范围

发表于 | 分类于

关于Browserlist浏览器支持范围

Tags: 工程化
创建时间: January 11, 2022
评星: ⭐️⭐️⭐️⭐️

  1. 查看浏览器内核版本：https://liulanmi.com/labs/core.html
  2. 什麼是 Browserlist？設定 Autoprefixer、Stylelint 來支援你想要的任何瀏覽器！https://ithelp.ithome.com.tw/articles/10192300
  3. https://github.com/browserslist/browserslist
  4. https://aaronflower.github.io/essay/Browserslist.html
  5. https://github.com/vitejs/vite/tree/main/packages/plugin-legacy

问题描述

客户手机打不开h5重构页面，改用户配置如下：

Untitled

真机模拟缺失无法打开，经排查，修改了 plugin-legacy 插件配置后问题修复。

解决方案

代码修改如下：

Untitled

配置说明

1
2
3
4
5
6
7
8
import legacy from '@vitejs/plugin-legacy';

export default{
	legacy({
	//	targets: ['defaults', 'not IE 11'],
		target: ['last 2 version', '>1%', 'ios 7'],
	}),
}

targets: [‘defaults’, ‘not IE 11’]

defaults: > 0.5%, last 2 versions, Firefox ESR, not dead.

  • 0.5: 使用率大于0.5%
  • last 2 version : 即支持各类浏览器最近的2个版本;
  • Firefox ESR: 支持火狐浏览器延长支持版；
  • not dead: 这个 query 中 not 是逻辑非操作符，即对 dead取反。dead 条件是：最新的两个版本中发现其市场份额已经低于 0.5% 并且 24 个月内没有任务官方支持和更新了；
  • not IE 11：不支持IE 11；

target: [‘last 2 version’, ‘>1%’, ‘ios 7’]

  • 0.5: 使用率大于1%；
  • last 2 version : 即支持各类浏览器最近的2个版本;
  • ios 7：支持 ios 7；