說下browserslist

browserslist  是一個開源項目

見到有些package.json里會有如下的配置參數

 "browserslist": [
    "> 1%",
    "last 2 versions",
    "Android >= 3.2", 
    "Firefox >= 20", 
    "iOS 7"
  ]

應該不難猜出來，這個項目的瀏覽器兼容情況。

白話就是我這個項目兼容絕大多數的，最新的和iOS7系統下的瀏覽器。不兼容Android 3.2系統以下和Firefox20以下的瀏覽器

像這些" > 1%", "last 2 versions" 都是查詢參數。

查詢參數很強大，比如我想查看在中國大多數瀏覽器的使用情況。還有IE8。對比美國的。

具體參數列表見官方文檔

 

具體的影響到前端工具的編譯情況，比如 Autoprefixer 可以給css加兼容性前綴

babel-preset-env ， eslint-plugin-compat， stylelint-no-unsupported-browser-features 和 postcss-normalize

比如.babelrc文件你可以針對配置

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["last 2 versions"],
        "node": "current"
      },
    }]
  ]
}

更進一步根據瀏覽器可以獲得特性，比如最新的chrome瀏覽器支持原生的promise，而IE不支持，babel根據browserslist配置項就會動態的轉義。不用在一個個進行配置。