认识BrowsersList 在webpack 打包过程中的作用

date
Nov 8, 2023
slug
browsersList-do-what
status
Published
tags
Webpack
summary
what does browsersList do in webpack
type
Post

背景

作为一个前端开发，对于webpack 就不做过多的介绍了，这里是webpack的官方网站，大家可以自行查看：webpack 官网 。 webpack就目前而言在现有市场中的使用率还是非常高的，咱们喜马目前大部分的前端项目也都是使用的webpack进行的前端项目打包。

前言

我们知道，早期前端开发主要就是HTML,CSS和Javascript， 随着浏览器和移动端技术的发展，前端开发技术也在不断的进步，尤其是工程化的能力越来越强，这也使得像webpack 这类的打包工具得到了空前的发展，但在这个过程中，有一个问题一直都在考验着我们前端开发人员，那就是兼容性问题。
这里我说的兼容性问题不是指兼容不同屏幕大小的适配问题，这个当然也有相关的处理方法，今天我们说兼容性说的是针对不同的浏览器支持的特性，比如css特性，js 语法之间的兼容性。
 
例如某些css 语法(user-select)只在某些浏览器支持，某些js语法(promise，箭头函数)只在哪些浏览器的哪些版本之后支持，这些都是属于兼容性的问题。
 
在很早之前，处理这些兼容性问题还是比较复杂或者说比较麻烦的，很多时候都是需要手动处理，而现在的话就简单很多了，因为随着技术的发展，前端工程化越来越强，出现了很多工具可以协助我们完成这些工作，例如我们可以使用autoprefixer 去自动添加css 前缀，使用babel来对js语法进行转化，这些工作也随之变得简单。

问题

但是这又引出来另外一个问题，在众多浏览器以及众多版本中，我当前所写的css是否需要添加前缀？ 并不是说所有的都添加前缀就是好，因为如果咱们公司项目只需要在部分浏览器支持，一股脑所有的都添加前缀，首先对于用户来说没有任何的帮助，其次还会增加代码量和项目体积，用户下载的包体积变大，用户体验反而不好了，所以是否需要添加前缀或者转换，这些都取决于公司需要适配哪些浏览器。如果适配的浏览器需要添加前缀才会添加，如果不需要的话则不添加。这里就引申出来一个问题，我们的项目到底支持哪些浏览器？

解决方法

我们知道市面上有大量的浏览器：有Chrome、Safari、IE、Edge、Chrome for Android、UC Browser、QQ Browser等等，而且他们之间还有各种版本，不同版本之间又有着不同的特性。我们不可能手动去指定我们要支持哪个浏览器的哪些版本，这不切实际。
 
在我们很多的前端项目中我们经常能看到脚手架配置中有下面的配置信息：
> 1%
last 2 version
not dead
这些配置是什么呢？它们又是做什么的呢？
 
其实这些都是一句一句的条件，它主要就是告诉各类工具当前需要适配哪些浏览器。
 
例如这里的 > 1%, 意思就是市场占有率大于1%的浏览器，如果市场占有率大于1%的浏览器不支持相关特性，那么对应的autoprefixer或babel等工具则需要对相应的css和js做转化处理，如果市场占有率大于1%的浏览器支持相应的特性，则不需要处理。
 
但是这里又出现了一个另外一个问题，我们怎么知道哪些浏览器市场占有率超过1%呢？ 这里当然不是我们随便说说，毕竟市场上浏览器这么多，版本也各不相同，我们需要一个专业的统计数据支撑才可以，其实提供这个数据功能的网站是一个我们常用的网站： caniuse。 作为前端开发，我们之前经常会在这个网站查询一些css 特性或者js语法的支持度，其实这个网站还有一个很重要的功能就是提供各类浏览器不同版本的市场占有率：
"Can I use" usage table
Total amount accounted for: 98.47%
https://caniuse.com/usage-table
 
所以说我们可以在这个网址我们可以查看到不同浏览器版本在当前市场中的占有率情况。
 
但是同样的，我们不可能针对每一个css 或者js 工具都去一个个的查对应的这些数据，我们应该要提供一个工具，让所有需要知道当前项目兼容性的工具都能够通过这个工具来共享项目的目标浏览器，这就引入了咱们今天的主角： BrowsersList

BrowsersList

Browserslist是什么？
简单来说，Browserslist是一个在不同的前端工具之间，共享目标浏览器和Node.js版本的配置的工具。
 
我们常见的需要通过BrowsersList来获取目标浏览器的工具有以下这些：
 
  • Autoprefixer
  • Babel
  • postcss-preset-env
  • eslint-plugin-compat
  • stylelint-no-unsupported-browser-features
  • postcss-normalize
  • obsolete-webpack-plugin
 
可以看到有很多的工具都依赖BrowsersList这个工具去处理当前项目，所以BrowsersList是前端工程化过程中一个重要的组成部分。在React或者Vue的官方脚手架中都可以看到它的身影，在使用webpack打包项目过程中，它也是必不可少的工具之一。
 

BrowsersList 编写规则

再知道了BrowseList 的作用之后，我们可以稍微了解一下它的编写规则，除了我们常见的配置之外，它其实还有很多可以自定义化的配置：
 
> 1%
last 2 version
not dead
 
  • defaults：Browserslist的默认浏览器（> 0.5%, last 2 versions, Firefox ESR, not dead）。
  • 5%：通过全局使用情况统计信息选择的浏览器版本。 >=，<和<=工作过。
    • 5% in US：使用美国使用情况统计信息。它接受两个字母的国家/地区代码。
    • > 5% in alt-AS：使用亚洲地区使用情况统计信息。有关所有区域代码的列表，请参见caniuse-lite/data/regions
    • > 5% in my stats：使用自定义用法数据。
    • > 5% in browserslist-config-mycompany stats：使用 来自的自定义使用情况数据browserslist-config-mycompany/browserslist-stats.json。
    • cover 99.5%：提供覆盖率的最受欢迎的浏览器。
    • cover 99.5% in US：与上述相同，但国家/地区代码由两个字母组成。
    • cover 99.5% in my stats：使用自定义用法数据。
  • dead：24个月内没有官方支持或更新的浏览器。现在是IE 10，IE_Mob 11，BlackBerry 10，BlackBerry 7， Samsung 4和OperaMobile 12.1。
  • last 2 versions：每个浏览器的最后2个版本。
    • last 2 Chrome versions：最近2个版本的Chrome浏览器。
    • last 2 major versions或last 2 iOS major versions：最近2个主要版本的所有次要/补丁版本
  • node 10和node 10.4：选择最新的Node.js10.x.x 或10.4.x版本。
    • current node：Browserslist现在使用的Node.js版本。
    • maintained node versions：所有Node.js版本，仍由 Node.js Foundation维护。
  • iOS 7：直接使用iOS浏览器版本7。
    • Firefox > 20：Firefox的版本高于20 >=，<并且<=也可以使用。它也可以与Node.js一起使用。
    • ie 6-8：选择一个包含范围的版本。
    • Firefox ESR：最新的[Firefox ESR]版本。
    • PhantomJS 2.1和PhantomJS 1.9：选择类似于PhantomJS运行时的Safari版本。
  • extends browserslist-config-mycompany：从browserslist-config-mycompanynpm包中查询 。
  • supports es6-module：支持特定功能的浏览器。 es6-module这是“我可以使用” 页面feat的URL上的参数。有关所有可用功能的列表，请参见 。caniuselite/data/features
  • browserslist config：在Browserslist配置中定义的浏览器。在差异服务中很有用，可用于修改用户的配置，例如 browserslist config and supports es6-module。
  • since 2015或last 2 years：自2015年以来发布的所有版本（since 2015-03以及since 2015-03-10）。
  • unreleased versions或unreleased Chrome versions：Alpha和Beta版本。
  • not ie <= 8：排除先前查询选择的浏览器
 

如何实现

在了解了BrowsersList工具的功能以及编写规则之后，大家可能会好奇，BrowsersList是如何实现查询功能的，其实这里是caniuse 网站提供了一个工具叫：caniuse-lite, 我们可以在node_modules 中找到对应的browsersList文件，可以看到它引入了这个工具。他就是通过这个工具来查询最终匹配到的浏览器。
 
当然，我们也可以通过命令行来使用这个工具，这里我们可以在项目的终端输入以下命令：
 
npx browserslist "> 1%, last 2 version, not dead"
 
可以看到终端输出了对应的具体浏览器，这就是根据我们所写配置过滤出来的浏览器，项目中其他工具就会根据这些浏览器的特性来做相应的处理。
 
这里大家可以看到我所写的每一个条件都是通过逗号分隔的，那这些条件之间的关系是怎么样的呢？是取并集还是交集呢？这就涉及到了browsersList的条件关系。
 

BrowsersList 条件关系

可以根据官方说明知道，这里使用逗号分隔其实是取得并集，也就是只要满足其中有一个就可以。
notion image
 

BrowsersList 配置文件

如何在项目中配置browserList呢？
  • 方案一： 在package.json中直接配置
  • 方案二：单独配置文件 .browserslistrc 文件

© xk_wan 2021 - 2024