资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/备份一点笔记, 关于用 escodegen 将 JavaScript AST 转化为代码

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

novo / 3439人阅读

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

这是 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 += "
//# 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 也是, 差别已经非常小了

海外云主机 私有云 将语音转化为文字的软件 js将数据转化为json js将数据转化为json格式 php将数组转化对象

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85563.html

相关文章

  • 一看就懂的JS抽象语法树

    摘要：前言是现在几乎每个项目中必备的一个东西，但是其工作原理避不开对的解析在生成的过程，有引擎，早期了项目，了解这个之前我们先来看看这种引擎解析出来是什么东西。 前言 babel是现在几乎每个项目中必备的一个东西，但是其工作原理避不开对js的解析在生成的过程，babel有引擎babylon，早期fork了项目acron，了解这个之前我们先来看看这种引擎解析出来是什么东西。不光是babel还有...

    HackerShell 评论0 收藏0

  • 从现在起-彻底学会 js ast

    摘要：利用抽象语法树可以对你的源代码进行修改优化，甚至可以打造自己的编译工具。 showImg(https://segmentfault.com/img/bVbnELi);这是一棵树嘛 直奔主题 抽象语法树是js代码另一种结构映射，可以将js拆解成AST，也可以把AST转成源代码。这中间的过程就是我们的用武之地。 利用 抽象语法树(AST) 可以对你的源代码进行修改、优化，甚至可以打造自己的...

    xiyang 评论0 收藏0

  • 抽象语法树(Abstract Syntax Tree)

    摘要：例如会被分解成解析语法分析这个过程是将词法单元流数组转换成一个由元素逐级嵌套所组成的代表了程序语法结构的树，这个树就叫抽象语法树。常用的有使用生成并使用抽象语法树。 一般来说，程序中的一段源代码在执行之前会经历下面三个步骤1 分词／词法分析这个过程会将由字符组成的字符串分解成有意义的代码快，这些代码块被称为词法单元。例如 var a = 4；会被分解成 var、a、=、4、; 2 解析...

    余学文 评论0 收藏0

  • 通过实现一个简易打包工具，分析打包的核心原理

    摘要：而在编译过程中通过语法和词法的分析得出一颗语法树，我们可以将它称为抽象语法树也称为语法树，指的是源代码语法所对应的树状结构。而这个却恰恰使我们分析打包工具的重点核心。 概述 眼下wepack似乎已经成了前端开发中不可缺少的工具之一，而他的一切皆模块的思想随着webpack版本不断的迭代（webpack 4）使其打包速度更快，效率更高的为我们的前端工程化服务showImg(https:/...

    red_bricks 评论0 收藏0

  • 如何编写简单的parser（基础篇）

    摘要：在这里，词法解析器应用的规则即为词汇语法的定义，语法解释器应用的规则即为表达式语句声明和函数等的定义。如何编写简单的实践篇 什么是parser？ 简单的说，parser的工作即是将代码片段转换成计算机可读的数据结构的过程。这个计算机可读的数据结构更专业的说法是抽象语法树（abstract syntax tree），简称AST。AST是代码片段具体语义的抽象表达，它不包含该段代码的所有细...

    Barry_Ng 评论0 收藏0

发表评论

登陆后可评论

0条评论

novo

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<