写了个反编译 Javascript 的 babel 插件

先上项目地址： https://github.com/gzzhanghao/babel-plugin-transform-beautifier

用js-beautifier反编译出来的代码长这样：

function _scrollToView(a) { var b = this, c = b.listItems.eq(b.currentFocus), d = b.list.scrollTop(), e = c.height(), f = c.position().top, g = Math.abs(f), h = b.list.height(); return "search" === a ? e > h - f ? b.list.scrollTop(d + (f - (h - e))) :-1 > f && b.list.scrollTop(f - e) :"up" === a ? -1 > f && b.list.scrollTop(d - g) :"down" === a && e > h - f && b.list.scrollTop(d + (g - h + e)), b; } 

先通过babel-plugin-transform-beautifier再用js-beautifier反编译出来的代码长这样：

function _scrollToView(a) { var b = this; var c = b.listItems.eq(b.currentFocus); var d = b.list.scrollTop(); var e = c.height(); var f = c.position() .top; var g = Math.abs(f); var h = b.list.height(); if ("search" === a) { if (e > h - f) { b.list.scrollTop(d + (f - (h - e))); } else if (-1 > f) { b.list.scrollTop(f - e); } } else if ("up" === a) { if (-1 > f) { b.list.scrollTop(d - g); } } else if ("down" === a && e > h - f) { b.list.scrollTop(d + (g - h + e)); } return b; } 

代码片段取自这里 。

使用方法

先用 npm 安装：

npm i --save-dev babel-plugin-transform-beautifier 

然后给 babel 加上对应 plugin 就好：

{ plugins: ['transform-beautifier'], } 

注意： 插件只负责正常 beautifier 不做的事，也就是说要反编译一份代码我们需要先让它通过babel-plugin-transform-beautifier再通过js-beautifier。

How it works

插件的主要作用是通过各种转换把js-beautifier不做的事情给做了，比如把 SequenceExpression 拆成多个 Statement ，还有就是把 LogicalExpression 和 ConditionalExpression 转换成 IfStatement 。

比如下面的代码：

a = b, a() && b ? c() : d() 

经过转换会变成：

a = b if (a() && b) { c() } else { d() } 

除此之外还有很多转换规则，这里不一一列举。