ECMA/ES5、ES6相关疑问:如何判断代码库、编译产物的JS版本及浏览器支持
1 如何确认不同浏览器对各JavaScript版本的支持范围
- 优先通过特性检测实现:直接在目标浏览器的控制台执行对应版本的典型语法语句,比如检测ES6支持可以执行
() => { return 'test' }、typeof Promise、let a = 1这类代码,如果无报错且返回结果符合预期,说明对应特性支持,覆盖核心特性即可判断该浏览器对对应JS版本的兼容情况。 - 目前业界基本不做全版本的整体兼容判断,都是按需检测单个特性的支持度,避免边缘特性不支持导致的误判。
2 如何获知所使用的框架(例如StencilJS)的编译输出JS版本
- 直接查看框架配置文件:StencilJS项目可以打开根目录下的
stencil.config.ts文件,找到target配置项,该项的值就是指定的编译输出JS版本,可选值包含es5、es2017等,未显式配置的情况下StencilJS默认输出ES2017版本。 - 也可以直接执行一次编译,查看输出的dist目录下的JS产物,通过语法特征即可确认实际输出版本。
3 如何校验已有的压缩后JS文件遵循的是ECMA5还是ECMA6规范
- 本地用ESLint校验:配置ESLint规则中的
parserOptions.ecmaVersion为5,对目标JS文件执行lint检测,如果出现大量语法报错,说明文件版本高于ES5;再将ecmaVersion改为6重新校验,无语法报错即可确认是ES6规范。 - 用babel做转译测试:将
@babel/preset-env的target设置为仅支持ES5的ie 11,如果转译过程中存在语法转换记录,说明原文件包含ES6+语法。 - 人工快速识别:如果压缩后的JS代码中存在未转译的
let、const、=>、class、Promise等语法特征,即为ES6及以上版本;如果全部是var声明、无箭头函数等ES6特性,即为ES5版本。
内容的提问来源于stack exchange,提问作者nipoma3298
相关产品推荐
相关产品推荐

