通过eslint限制使用高版本语法，避免报错

背景

项目是使用vite进行打包的。vite打包时不会做低版本api的兼容处理，导致在chrome 80版本，会出现报错。

理想做法是打包时加上低版本的兼容转换代码，但是改打包的话影响很大，且会加大包体积。

既然决定不做兼容转换处理，那就只有手动改成浏览器支持的api了，但是可能别人不知道这回事，导致下次又出现这个bug，被提td。

解决方案

手写eslint限制

想到的提示方案就是通过eslint去限制

在.eslintrc.js的rules中添加以下限制

"no-restricted-syntax": [
  "error",
  {
    "selector": "CallExpression[callee.object.name='Object'][callee.property.name='hasOwn']",
    "message": "Object.hasOwn在低版本有兼容性问题，请不要使用"
  },
],

在编码时，如果使用了Object.hasOwn，则会告警提示，这样就避免了使用不支持的api，但是要限制的api实在是太多了，于是有了下面的方案

eslint-plugin-es-x

这是一个开源项目，专门收集了各版本的js语法、api，并内置了eslint的限制

我们只需要安装后

在.eslintrc.js的添加以下规则

extends: ["plugin:es-x/restrict-to-es2020"],
parserOptions: {
  project: "tsconfig.json",
},

这里查了下，es2020版本基本对应上chrome的80版本，所以限制在es2020

这样简单配置后，就实现了超过2020的api都不让用，避免浏览器不支持