部署代码的时候,构建时可能有些插件包未进行babel处理,容易造成线上兼容事故。
所以需对构建的js文件进行es6语法检查。
我认为一般只需要检测const|let|=>
即可。
一开始想的很简单就针对这三个字符匹配不就好了嘛,reg = /(const | let |=>)/
后来发现打包后代码还有 var $bullet = bullets.eq(current);
,这种写法也被检测出来了,其实这种也算比较常见的写法,其实应该忽略掉,修改后
const regEs6 = /\b(let|const)\s+\$?\w*?\b|=>/;
各位大佬看下还有什么遗漏或者未检测的情况么?
简单列了几条,欢迎补充探讨...
/**
* 需要检测的情况
* let (a|_a|$a) = 1;
* let (a|_a|$a);
* \n let a = 1
* ;let a = 1
* for(let i = 1; ...)
*/
/**
* 需要忽略的情况
* var $bullet = bullets.eq(current);
* var _let|$let;
*/
###不要搞这种半拉子的事儿, 没有被babel拷打过的包一律进去走一遭。 这个时候正是babel这类工具体现价值的时候。
###还有异步过程包装器 Promise
;
还有类声明关键字 class
、extends
;
还有 Array.prototype
上新增的几个方法;
还有迭代语法 for ... of
;
还有多行字符串、模板字符串${xxx}
;
还有数据结构对象 Map
、Set
;
还有新的基础类型 Symbol
;
还有对象、数组解构语法;
还有展开/剩余运算符 ...
;
还有函数形参默认值;
还有元编程利器 Proxy
、Reflect
;
……
上面这些还只是 ES2015
(?) 的,后面还有一年一茬的新语法:
比如异步处理的终极利器 async/await
;
比如可选链、空值合并;
比如大整数类型BigInt
;
比如私有属性/方法 #xxx
;
……
往后还有很多就算有经验的人都很难一眼看出来的新语法,比如新的正则语法、可省略的 catch
。
虽然说这些新特性的使用频率不比 let/const
、箭头语法的高,但是不全部排查的话,就不严谨,而既然生产环境要考虑 ES6
不能执行,那就必须考虑周全了,否则也是五十步笑百步。
还有一个问题就是:检测出 ES6+
的语法之后,要怎么办?答案大概率是要打包。
所以如楼上所言,全部打包是最稳妥的方案。
如果确需检测语法最低版本的话,也许可以试试 puppeteer
(不知道有没有老版本 chromium
),或者 jerryScript
(鸿蒙用的版本还不支持 ES6
,用这个版本解析的话肯定是能因ES6+
语法而抛错的),或者写 babel
插件……不过解析过程只能检测新语法,没法检测运行时才用到的新特性,比如数组和Object
的新方法、Map
/Set
等新的内置类。
下面的这种代码就巧妙地避开了题主的正则校验: