前端组兼容性范围

参考网站：

• 查看浏览器占比(browserslistrc)
• 语法兼容性检查 CanIUse

之前基于已有项目，前端组暂定语法兼容范围为

• 火狐 Firefox 52+ 版本
• 谷歌 Chrome 78+ 版本

但是由于部门项目碰到的一些低版本浏览器（Firefox 42.0.4）导致代码语法错误，所以要求所有 vue 项目调整下 /.browserslistrc​文件（或者修改 package.json​对应项）

目前要求统一调整为

​/.browserslistrc​文件

> 1%
last 2 versions
Firefox > 40
Chrome > 40
not dead

​/package.json​文件

{
    ...
    "browserslist": [
        "> 1%",
        "last 2 versions",
        "Firefox > 40",
        "Chrome > 40",
        "not dead",
    ]
}

具体原因如下

参考地址：

• 官方 npm 地址
• 官方 GitHub 地址
• 线上检查地址

碰到问题

打包 babel 没有转义 let 等关键字

成因：由于浏览器占比变了

babel 打包会读取 /.browserslistrc​文件设置的浏览器支持范围

默认的 /.browserslistrc​随着时间推移是会变化的

// .browserslistrc 默认值

> 1%
last 2 versions
not dead

以上配置在 2023 年 08 月 02 日如图所示

​​

所以如果单纯使用默认的配置很大可能会出现，今年能够正常运行的项目，到了明年重新打包编译后就开始报语法错误

针对这个问题目前可以要求强制设置 /.browserslistrc​文件需要支持的最低浏览器版本，以防止动态变化（可以设置多个，但是应该是会取最低的版本）

关于如何配置

语句	说明
​default> 0.5%​	​last 2 versions, Firefox ESR, not dead​
​> 1%​	全球超过 1% 人使用的浏览器
​last 2 versions​	每个浏览器的最后 2 个版本
​Firefox ESR​	火狐最新版本
​Firefox > 20​	指定浏览器的版本范围
​not ie <=8​	排除版本低于和等于 8 的 ie 浏览器
​maintained node versions​	所有 Node.js 版本
​since 2020​	自 2020 年以后发型的版本

‍