H5W3
当前位置:H5W3 > 问答 > 正文

使用正则校验打包文件es6语法问题

部署代码的时候,构建时可能有些插件包未进行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
还有类声明关键字 classextends
还有 Array.prototype 上新增的几个方法;
还有迭代语法 for ... of
还有多行字符串、模板字符串${xxx}
还有数据结构对象 MapSet
还有新的基础类型 Symbol
还有对象、数组解构语法;
还有展开/剩余运算符 ...
还有函数形参默认值;
还有元编程利器 ProxyReflect
……

上面这些还只是 ES2015(?) 的,后面还有一年一茬的新语法:
比如异步处理的终极利器 async/await
比如可选链、空值合并;
比如大整数类型BigInt
比如私有属性/方法 #xxx
……

往后还有很多就算有经验的人都很难一眼看出来的新语法,比如新的正则语法、可省略的 catch

虽然说这些新特性的使用频率不比 let/const、箭头语法的高,但是不全部排查的话,就不严谨,而既然生产环境要考虑 ES6 不能执行,那就必须考虑周全了,否则也是五十步笑百步。
还有一个问题就是:检测出 ES6+ 的语法之后,要怎么办?答案大概率是要打包。
所以如楼上所言,全部打包是最稳妥的方案。

如果确需检测语法最低版本的话,也许可以试试 puppeteer(不知道有没有老版本 chromium),或者 jerryScript(鸿蒙用的版本还不支持 ES6,用这个版本解析的话肯定是能因ES6+语法而抛错的),或者写 babel 插件……不过解析过程只能检测新语法,没法检测运行时才用到的新特性,比如数组和Object 的新方法、Map/Set等新的内置类。

本文地址:H5W3 » 使用正则校验打包文件es6语法问题

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址