问答

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

作者:admin 2021-05-11 我要评论

部署代码的时候,构建时可能有些插件包未进行babel处理,容易造成线上兼容事故。 所以需对构建的js文件进行es6语法检查。 我认为一般只需要检测 const|let|= 即...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

部署代码的时候,构建时可能有些插件包未进行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等新的内置类。

下面的这种代码就巧妙地避开了题主的正则校验:
image.png

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • 使用正则校验打包文件es6语法问题

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

  • antd table中如何使用ref获取dom元素

    antd table中如何使用ref获取dom元素

  • vue-element-admin 权限路由的问题

    vue-element-admin 权限路由的问题

  • nodejs如何多条件查询?

    nodejs如何多条件查询?

腾讯云代理商
海外云服务器