npm 包 @mtz/browserslist-config-maritz 使用教程-JavaScript中文网-JavaScript教程资源分享门户

browserslist 是一个可以在不同的前端工具中配置目标浏览器的工具。在编写 JavaScript 或 CSS 代码时，开发者可以指定应该支持的浏览器版本，browserslist 就能据此生成适合的兼容性代码。@mtz/browserslist-config-maritz 是一个由 maritz 公司开发的预设浏览器列表，本文将介绍其使用方法。

安装

npm install @mtz/browserslist-config-maritz --save-dev

使用

在 package.json 文件中 browserslist 字段中添加 "extends": "@mtz/browserslist-config-maritz"：

{
  "browserslist": {
    "extends": "@mtz/browserslist-config-maritz"
  }
}

不同的前端工具使用 browserslist 时需要的配置略有不同，下面分别介绍。

Webpack

在 webpack.config.js 文件中使用 browserslist-webpack-plugin：

-- -------------------- ---- -------
----- ------------------ - --------------------------------------

-------------- - -
  -- ---
  -------- -
    --- --------------------
      ----- ------------------
      -- ----- ---------- ------------ ----
      -- -------- ------ - ---------- --- -- ----
    --
  -
-

PostCSS

在 postcss.config.js 文件中使用 postcss-preset-env：

module.exports = {
  plugins: [
    require('postcss-preset-env')({
      browsers: 'extends @mtz/browserslist-config-maritz'
    })
  ]
}

Autoprefixer （命令行）

在命令行中使用 autoprefixer-cli：

npx autoprefixer --browsers "extends @mtz/browserslist-config-maritz" [-o output.css] input.css

常用的目标浏览器

@mtz/browserslist-config-maritz 预设的目标浏览器如下：

-- -------------------- ---- -------
-
  --------------- -
    -- ------
    --- -- ----
    ----- - ----------
    -------- -----
    ----- -- ----
    ---- -- ---
    ------- -- ---
    -------- -- -----
    ------- -- ---
  -
-

其中：

> 0.5%：全球浏览器使用率大于 0.5%
ie >=11：IE 版本不低于 11
last 2 versions：各个浏览器的最新两个版本
Firefox ESR：最新的 Firefox 长期支持版
Edge >= 12：Edge 版本不低于 12
iOS >= 8：iOS 版本不低于 8
Safari >= 8：Safari 版本不低于 8
Android >= 4.4：Android 版本不低于 4.4
Chrome >= 49：Chrome 版本不低于 49

总结

使用 @mtz/browserslist-config-maritz，我们能够很容易地配置目标浏览器，并生成最佳的兼容性代码。在具体应用中，可以根据项目对浏览器的要求来自定义配置，更好地适配实际情况。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60056ba081e8991b448e5651