browserslist详解

蔚落 2022-10-09 00:40 218阅读 0赞

## 1.vue哪里用到了 ##

配置在package.json中（推荐）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpZ3VhbmdfODIw_size_16_color_FFFFFF_t_70][]

或者

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpZ3VhbmdfODIw_size_16_color_FFFFFF_t_70 1][]

## 2.vue-cli搭建项目中browserslist的作用讲解 ##

为什么需要：  
根据提供的目标浏览器的环境来，智能添加css前缀，js的polyfill垫片,来兼容旧版本浏览器。避免不必要的兼容代码，以提高代码的编译质量。

共享使用browserslist的组件们：

<table> 
 <thead> 
  <tr> 
   <th>组件名</th> 
   <th>功能vv</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>Autoprefixer</td> 
   <td>postcss添加css前缀组件</td> 
  </tr> 
  <tr> 
   <td>bable-preset-env</td> 
   <td>编译预设环境 智能添加polyfill垫片代码</td> 
  </tr> 
  <tr> 
   <td>postcss-normalize</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>等等……</td> 
   <td>&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

基础语法： 只要package.json配置了browserslist对象,需要的组件将**自动匹配**到并使用,也可以配置到**具体的组件参数**上

{   // package.json
      "browserslist": [         // 注意：是一个数组对象
      		"> 1%",
    		"last 2 versions"
      ] }

**last 2 versions**：CanIUse.com追踪的IE最新版本为11,向后兼容两个版本即为10、11

**设置语法**：通过浏览器过滤的思路实现  
默认是兼容所有最新版本

<table> 
 <thead> 
  <tr> 
   <th>例子</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>&gt; 1%</td> 
   <td>全球超过1%人使用的浏览器</td> 
  </tr> 
  <tr> 
   <td>&gt; 5% in US</td> 
   <td>指定国家使用率覆盖</td> 
  </tr> 
  <tr> 
   <td>last 2 versions</td> 
   <td>所有浏览器兼容到最后两个版本根据CanIUse.com追踪的版本</td> 
  </tr> 
  <tr> 
   <td>Firefox ESR</td> 
   <td>火狐最新版本</td> 
  </tr> 
  <tr> 
   <td>Firefox &gt; 20</td> 
   <td>指定浏览器的版本范围</td> 
  </tr> 
  <tr> 
   <td>not ie &lt;=8</td> 
   <td>方向排除部分版本</td> 
  </tr> 
  <tr> 
   <td>Firefox 12.1</td> 
   <td>指定浏览器的兼容到指定版本</td> 
  </tr> 
  <tr> 
   <td>unreleased versions</td> 
   <td>所有浏览器的beta测试版本</td> 
  </tr> 
  <tr> 
   <td>unreleased Chrome versions</td> 
   <td>指定浏览器的测试版本</td> 
  </tr> 
  <tr> 
   <td>since 2013</td> 
   <td>2013年之后发布的所有版本</td> 
  </tr> 
 </tbody> 
</table>

## 3.参考 ##

browserslist详解：[https://www.jianshu.com/p/d45a31c50711][https_www.jianshu.com_p_d45a31c50711]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpZ3VhbmdfODIw_size_16_color_FFFFFF_t_70]: /images/20221005/a2055a1bd2a94012a2b03efefc35f48a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpZ3VhbmdfODIw_size_16_color_FFFFFF_t_70 1]: /images/20221005/06597d64cc3d49848ed542262bbe501d.png
[https_www.jianshu.com_p_d45a31c50711]: https://www.jianshu.com/p/d45a31c50711