写了个反编译 JavaScript 的 babel 插件

[gzzhanghao]

先上项目地址： 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()
}

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

[DoraJDJ]

这应该得叫反混淆吧...
JS 编译完全没听说过

[moyang]

对，反混淆。感觉还是很有意义的，特别是拆 sequential expression ，对放 debug break 很有用

[bramblex]

人家那是压缩，不是混淆…

[yangxiongguo]

chrome 里按一下 {} ？

[justjavac]

反压缩

[moyang]

@yangxiongguo 这样如果一堆 statement 是 a,b,c 这样下来的你就没法放 break point 在 b ，只能放在 a 然后往后走

[gzzhanghao]

楼上干嘛那么纠结用词问题…在这个语境下我说反编译应该都知道这是在干嘛吧(´･_･`)

[gzzhanghao]

@yangxiongguo chrome 的格式化工具不会处理`a?b:c`和`a&&b`这两种情况，实际处理效果和 js-beautify 生成的结果并没有多大区别

[fulvaz]

.....不, 我点进来是以为楼主实现了从 js 反编译到 c++或者汇编什么的, 并不以为只是 beautify

[gzzhanghao]

@fulvaz 那叫编译吧，这样的话反编译是指从 v8 生成的汇编变回 js ，这就有点高端了_(:з」∠)_

[crysislinux]

不错，点赞

[qfdk]

有个词叫做 pretty print 找个 js 的就好了 每次碰到混淆的代码就这么处理

[gzzhanghao]

@qfdk 其实就是 beautifier 吧，这个工具不是用来格式化代码的，而是用来把一些压缩后的语句恢复正常的。

比如下面这段代码：

```javascript
if (a) {
b()
} else if (c) {
d()
}
```

uglifyjs 会把它转换成`a ? b : c && d`，我所知道的所有代码格式化工具对这种表达式都只是原样输出，而我这个工具能把它变回原来的 if 语句。这点从我上面贴出来的代码就可以看出区别了。

[aaronrzh]

其实就是个格式化 js 的工具

[gzzhanghao]

@aaronrzh 还是不太一样的，格式化的工作是交给 js-beautifier 完成的，这个只负责把代码逻辑还原出来