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

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
当我们使用ES6对象拓展时,可以更加简洁和灵活地操作对象。下面是更多关于ES6对象拓展的笔记代码示例: 1. 合并对象和覆盖属性: ES6对象拓展允许我们合并多个对象并覆盖属性。这对于创建新的对象或更新现有对象非常有用。 ```javascript const person = { name: "John", age: 30 }; const additionalInfo = { city: "New York", profession: "Developer" }; const mergedPerson = { ...person, ...additionalInfo }; console.log(mergedPerson); // 输出:{ name: "John", age: 30, city: "New York", profession: "Developer" } ``` 2. 动态设置属性: ES6对象拓展使我们能够动态设置属性,这对于根据不同情况设置对象的属性非常有用。 ```javascript const propName = "name"; const propValue = "John"; const person = { [propName]: propValue }; console.log(person); // 输出:{ name: "John" } ``` 3. 对象方法的简写: ES6对象拓展还允许我们以更简洁的方式定义对象方法。 ```javascript const person = { name: "John", age: 30, sayHello() { console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`); } }; person.sayHello(); // 输出:Hello, my name is John and I'm 30 years old. ``` 4. 克隆对象: ES6对象拓展提供了一种简单的方式来克隆一个对象。 ```javascript const person = { name: "John", age: 30 }; const clonedPerson = { ...person }; console.log(clonedPerson); // 输出:{ name: "John", age: 30 } ``` 5. 合并数组到对象属性: ES6对象拓展允许我们将数组合并到对象的属性中。 ```javascript const hobbies = ["reading", "painting", "coding"]; const person = { name: "John", age: 30, hobbies: [...hobbies] }; console.log(person); // 输出:{ name: "John", age: 30, hobbies: ["reading", "painting", "coding"] } ``` 这些是关于ES6对象拓展的更多笔记代码示例。ES6对象拓展提供了一种简洁、灵活和有用的方式来操作和创建对象。希望对你有所帮助!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值