编译原理01-编辑器工作流

需求分析

• 实现JSX语法转换成JS语法的编译器
• 需求: 将一段JSX语法的代码生成一个AST,并支持遍历和修改这个AST。将AST重新生成JS语法的代码。

编译器工作流

• 解析(Parsing) 解析是将最初最原始的代码转换为一种更加抽象的表示(即AST)
• 转换(Transformation)转换是将对这个抽象的表示做一些处理，让它做到编译器希望它做到的事情
• 代码生成(Code Generation)接受处理之后的代码表示，然后把它转化为新代码

我们首先先了解一个网站:AST explorer

得到这个网站之后,我们打开输入这行指令，观察其AST语法树。

<h1 id="title"><span>你好</span>世界</h1>

但是这个毕竟是这个在线的网站给我们实现的效果。我们最好还是在自己本地node环境中尝试一下编译抽象语法树的流程。

npm install esprima estraverse-fb --save-dev

"devDependencies": {
    "esprima": "^4.0.1",
    "estraverse-fb": "^1.3.2"
  }

在项目根目录下创建一个文件夹，命名为doc，在文件里面创建一个新文件，命名为1.tokenizer.js

let esprima=require('esprima')
let estraverse=require('estraverse-fb')
let code=`<h1 id="title"><span>你好</span>世界</h1>`
// 传递源代码和是否打印tokens和是否支持jsx,返回编译模块的module
let ast=esprima.parseModule(code,{jsx:true,tokens:true})
let ident=0
function padding(){
    return ' '.repeat(ident)
}
estraverse.traverse(ast,{
    enter(node){
        console.log(padding()+node.type+'进入')
        ident+=2
    },
    leave(node){
        console.log(padding()+node.type+'离开')
        ident-=2
    }
})
/**
 * 源代码进行分词,变成一个token的数组,然后将要遍历的数组变成一个抽象语法树
 */

我正在参加「创意开发 投稿大赛」详情请看：掘金创意开发大赛来了！