备份一点笔记, 关于用 escodegen 将 JavaScript AST 转化为代码-CSDN博客

这是 Cirru 项目相关的代码, 就是把 Cirru 代码变换成 JavaScript 代码
当前版本的 CirruScript 用的是手工转化, 代码是比较乱的, 虽然也比较有效..
其中, SourceMap 支持导致代码的复杂性难以降低,
而且, 实际上我当前写的几个项目都是没有开启 SourceMap, 因为提升并不明显
另一个原因是 CirruScript 代码和 JavaScript 几乎是对应的,
在 Webpack 对所有文件都打包的前提下, 查看 js 源代码很正常, 也不容易调试原文件

综上, 我开始考虑继续原先一个 Scirpus 项目, 基于 JavaScript AST 编译 Cirru
而且在未来版本的重构中我会去掉 CirruScript 的 SourceMap 支持
主要的原理参考下边三个链接即可:

https://speakerdeck.com/constellation/escodegen-and-esmangle-using-moz...
http://esprima.org/demo/parse.html
https://developer.mozilla.org/en-US/docs/SpiderMonkey/Parser_API

其中与 escodegen 相关的代码是这样的, 其中包含了生成 SourceMap 所需的参数:

coffeefs = require 'fs'
escodegen = require 'escodegen'

exports.write = (info, ast) ->
  opts =
    sourceMap: info.relativePath
    sourceMapRoot: info.base
    sourceMapWithCode: yes
  {code, map} = escodegen.generate ast, opts <-- 传入 AST 和选项, 调用即可
  jsonMap = JSON.stringify map, null, 2
  code += "\n//# sourceMappingURL=./#{info.mapFile}"
  fs.writeFileSync info.jsPath, code
  fs.writeFileSync info.mapPath, jsonMap

具体代码我应该是在官方仓库的示例当中抄的:
https://github.com/estools/escodegen/blob/master/test/source-map.js

啰嗦一下最近看 LLVM, 跟编译 JavaScript 做了一些对比..
(还不熟悉)但是看汇编的结果, 感觉那确实是 SourceMap 的用武之地
JS 语法在语义方面还是很接近人类阅读习惯的, 包括 Cirru 也是, 差别已经非常小了