browserslist

介绍

browserslist用于解决前端兼容性，用于在配置不同前端工具共享目标浏览器和Node.js的版本。如：

1.Autoprefixer

Autoprefixer为 PostCSS插件，用于解析CSS并使用Can I Use中的值为CSS规则添加目前浏览器的css前缀。

::placeholder {
  color: gray;
}

.image {
  background-image: url(image@1x.png);
}
@media (min-resolution: 2dppx) {
  .image {
    background-image: url(image@2x.png);
  }
}

Autoprefixer将使用基于当前浏览器流行度和属性支持的数据为您应用前缀

增加css前缀之后

::-moz-placeholder {
  color: gray;
}
::placeholder {
  color: gray;
}

.image {
  background-image: url(image@1x.png);
}
@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 2dppx) {
  .image {
    background-image: url(image@2x.png);
  }
}

2.Babel

Babel是一个工具链，主要用于在当前和较旧的浏览器或环境中将ECMAScript 2015+代码转换为向后兼容的JavaScript版本。 以下是Babel能为你做的主要事情: ①.转换语法

②.Polyfill填充目标环境中特性(通过第三方库填充，如core-js)

③.源代码转换(codemods方法转换)

3.postcss-preset-env

postcss-preset-env是一个的PostCSS插件包。让您将现代CSS转换为大多数浏览器都能理解的东西，并根据目标浏览器或运行时环境确定所需的polyfill(补丁)

@custom-media --viewport-medium (width <= 50rem);
@custom-selector :--heading h1, h2, h3, h4, h5, h6;

:root {
  --mainColor: #12345678;
}

body {
  color: var(--mainColor);
  font-family: system-ui;
  overflow-wrap: break-word;
}

:--heading {
  background-image: image-set(url(img/heading.png) 1x, url(img/heading@2x.png) 2x);

  @media (--viewport-medium) {
    margin-block: 0;
  }
}

a {
  color: rgb(0 0 100% / 90%);

  &:hover {
    color: rebeccapurple;
  }
}

处理结果

:root {
  --mainColor: rgba(18, 52, 86, 0.47059);
}

body {
  color: rgba(18, 52, 86, 0.47059);
  color: var(--mainColor);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Droid Sans, Helvetica Neue;
  word-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 {
  background-image: url(img/heading.png);
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  h1, h2, h3, h4, h5, h6 {
    background-image: url(img/heading@2x.png)
  }
}

@media (max-width: 50rem) {
  h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 0;
  }
}

a {
  color: rgba(0, 0, 255, 0.9)
}

a:hover {
  color: #639;
}

4.eslint-plugin-compat

检查代码的浏览器兼容性

5.stylelint-no-unsupported-browser-features

这个插件检查你正在使用的CSS是否被你的目标浏览器支持。它使用doiuse来检测浏览器的支持。

Doiuse自己根据caniuse数据库检查代码，并使用browserslist获取想要支持的浏览器列表。

Doiuse和这个插件只兼容标准的css语法，所以像scss, less和其他语法不支持。

6.postcss-normalize

PostCSS Normalize允许您使用从browserslist的Normalize.css或sanize.css的部分。

PostCSS Normalize使用Normalize.css的通用版本，但也可以使用自定义版本。

7.obsolete-webpack-plugin