npm 包 doiuse 使用教程

在前端开发中，我们常常会遇到浏览器兼容性的问题。为了解决这个难题，有一个非常好用的 npm 包叫做 doiuse。

什么是 doiuse

doiuse 是一个基于 postcss 的插件，可以检查 CSS 是否使用了某些不被支持的 CSS 属性或者属性值，并列出不支持它们的浏览器版本。此外，它还提供了一份清晰的报告，让你更好地了解哪些浏览器不支持你正在使用的 CSS 特性。

安装 doiuse

你可以通过 npm 安装 doiuse：

npm install doiuse --save-dev

使用 doiuse

在项目根目录下创建 .doiuserc 文件，配置需要检查的浏览器版本以及需要忽略的属性或者属性值。下面是一个示例文件：

{
  "browsers": ["> 1%", "last 2 versions", "ie >= 11"],
  "ignore": ["rem"]
}

在 package.json 文件中添加以下脚本：

{
  "scripts": {
    "test:css": "doiuse css/*.css"
  }
}

现在，在命令行运行 npm run test:css 就可以检查 css 目录下所有的 CSS 文件了。

示例代码

假设你有如下的 CSS 文件：

.button {
  display: inline-block;
  padding: 10px;
  border-radius: 5px;
  background-color: #f00;
}

运行 npm run test:css，你会得到如下的报告：

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

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

这意味着 border-radius 属性在 IE 11 中不被支持，你需要使用其他方式来实现圆角。

总结

doiuse 是一个非常有用的工具，可以帮助我们避免浏览器兼容性问题。通过本文的介绍，你已经了解了如何安装和使用 doiuse，并学会了如何配置 .doiuserc 文件和如何解读报告。

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