利用 caniuse 结合 browserslist 对 JS 做兼容性检测

背景

前端开发的时候,我们经常会查 caniuse 看看某个方法是否兼容性足够,一旦不小心忘记查,则有可能使用了目标浏览器不支持的方法导致功能不可用甚至低端机上白屏,长期以往会降低质量同学对自己的信任分,比如 array.at 需要 Chrome >= 92 方可使用,而我们的目标浏览器是 90+。兼容性问题比较耗时间复现,有没有彻底的解决之道?

有,我们可以利用 eslint。

第一次尝试 eslint-plugin-compat ❌

www.npmjs.com/package/esl... 第一眼看上去蛮不错的,周下载量挺高 62w,而且支持 browserslist。按照配置尝试下。

js 复制代码
{
  "plugins": ["compat"],
  "extends": ["plugin:compat/recommended"],
  "env": {
    "browser": true,
  },
  // ...
}

package.json:

json 复制代码
"browserslist": [
    "Chrome >= 52",
    "Firefox >= 100",
    ">0.5%",
    "not dead"
  ],

但是发现代码并未检测到预期报错:

ts 复制代码
const array = result.cost.toString().split('.');
const last = array.at(-1); // 不能检测此处误用

翻阅资料 issue#539 发现,并不是我们配置有误,而是该包能力有限,无法推导变量类型故并不能检测原型链方法(若仅根据名字检测,则有误伤,因为任何对象都可以定义一个叫做 at 的方法),仅能检测静态方法。可以验证下:

ts 复制代码
const b = [4, 5, 6].at(2); // 能检测到 error
const foo = Object.values({});  // 能检测到 error

该 issue 同时给出了一个包 github.com/koddsson/es... 但是美中不足是这个包每周下载量仅有 6

第二次尝试 eslint-plugin-typescript-compat ✔️

这次我们使用 Trae 的 chat 模式问问最新的 DeepSeek-V3-0324:

我需要有一个根据 browserslist 规则检测 ts 函数兼容的 eslint 插件,比如我设置browserslist 为 ["Chrome > 90"] 则,即需要能检测到原型链上的方法而不仅仅是 static 方法

ts 复制代码
 const b = [4, 5, 6].at(2); //  需要被 eslint 检测到 error

 const array = result.cost.toString().split('.');
 const last = array.at(-1); // 也需要 error

🤖:根据你的需求,目前有一个 ESLint 插件可以基于 browserslist 规则检测 TypeScript 代码中的浏览器兼容性问题,包括原型链上的方法和静态方法。这个插件是 eslint-plugin-typescript-compat

下载量最高 8K 多,还行,按照官方文档配置下试试:

ts 复制代码
const array = result.cost.toString().split('.');
const last = array.at(-1); // 能检测到
const b = [4, 5, 6].at(2); // 能检测到
const foo = Object.values({}); // Chrome 54 即可支持,故此处不报错符合预期
console.log('last:', last, b, foo);

既能检测静态方法也能检测原型链方法,完美!

下一篇将介绍如何利用 caniuse 结合 browserslist 对 CSS 做兼容性检测。

相关推荐
天文家2 小时前
关于TypeScript中type和interface的区别与作用场景
typescript
十盒半价2 小时前
从空对象开始:手把手教你手写 new 函数,彻底理解 JS 原型机制
前端·javascript·trae
十盒半价2 小时前
React 面试必问:JSX 中 map 的 key 为什么不能随便写?一文吃透原理与最佳实践
前端·react.js·trae
lichenyang45315 小时前
Axios封装以及添加拦截器
前端·javascript·react.js·typescript
太阳上的雨天19 小时前
与 TRON (波场) 区块链进行交互的命令行工具 (CLI): tstroncli
typescript·区块链·交互·tron·trx·trc20
前端拿破轮20 小时前
HomeBrew创始人都写不出来的翻转二叉树到底怎么做?
前端·算法·typescript
围巾哥萧尘1 天前
全球AI编程IDE对比分析(欢迎补充)🧣
trae
趣多多代言人1 天前
20分钟学会TypeScript
前端·javascript·typescript
十盒半价2 天前
React 项目实战:从 0 到 1 构建高效 GitHub 仓库管理应用 —— 基于 React 全家桶的全栈开发指南
前端·react.js·trae
前端啊白2 天前
面试官:回答我!在tsconfig配置了别名你为啥要在vite再配置一遍?嗯?
typescript