【笔记】Browserslist学习笔记

发表于 阅读次数：

前言

Shared browser compatibility config for popular JavaScript tools like Autoprefixer, Babel, ESLint, PostCSS, and Webpack（官网）

下载依赖

1
npm install -D browserslist

获取需要兼容的浏览器版本

1
npx browserslist

添加需要兼容的浏览器配置

通过命令添加配置

  • 多个浏览器版本配置用and或,分隔，表示并且关系
1
npx browserslist "> 0.5% and last 2 versions and Firefox ESR and not dead"
1
npx browserslist "> 0.5%, last 2 versions, Firefox ESR, not dead"
  • 多个浏览器版本配置用or分隔，表示或者关系
1
npx browserslist "> 0.5% or last 2 versions or Firefox ESR or not dead"
  • 通过not表示非关系
1
npx browserslist "not dead"

直接修改配置文件

  • 每个浏览器版本配置占一行，表示或者关系
.browserslistrc
1
2
3
4
> 0.5%
last 2 versions
Firefox ESR
not dead

在Webpack+Babel中使用Browserslist

webpack.config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: "babel-loader",
          options: {
            presets: [
              ["@babel/preset-env", {
                targets: "> 0.5%, last 2 versions, Firefox ESR, not dead"
              }]
            ]
          }
        }
      }
    ]
  }
};

完成