关闭eslint检查2020_代码兼容性问题检查方案

data: 2020/07/27

问题

检查工程项目中代码的浏览器兼容性，防止编写存在兼容性问题的API。

方案

借助eslint/stylelint扩展，可以帮助我们在代码编写阶段实时感知所用API（js/css）存在的浏览器兼容性问题，并在commit hooks阶段通过检查报错阻止提交。

• browserslist

一套描述前端产品目标运行环境的工具。通过在项目中配置browserslist，可以为代码API指定目标运行环境（target browsers）。

1. 配置browserslist

// package.json
"browserslist": [
  "chrome >= 80",
  "firefox >= 74",
  "safari >= 10",
  "edge >= 80",
  "ios >= 10",
  "ie >= 8"
]

此处browserslist数据为调试临时数据，近似于DanaStudio项目配置。

2. 测试已配置的browserslist数据

npx browserslist

browserslist遵循一套独立的语法描述规范，详见：browserslist。

• 使用eslint扩展检查js静态类型的不兼容API

通过工程项目中的browserslist配置的target browsers数据，eslint-plugin-compat可以检查js API是否能够在目标浏览器上正常工作，并抛出提示信息。

eslint-plugin-compat是基于compat-db的一个静态分析工具。compat-db是一个可以自动生成API兼容性记录的库，它接收API作为输入，并以返回API对应的兼容性记录作为输出。compat-db是eslint-plugin-compat的底层数据库。

1. 安装

yan add eslint esli