FE System

Appearance

其他 ​

AST ​

AST Explorer

  1. 代码语法的检查、代码风格的检查、代码的格式化、代码的高亮、代码错误提示、代码自动补全等，如JSLint、JSHint对代码错误或风格的检查，发现一些潜在的错误
  2. IDE的错误提示、格式化、高亮、自动补全等等
  3. 代码混淆压缩
  4. UglifyJS2等
  5. 优化变更代码，改变代码结构使达到想要的结构
  6. 代码打包工具webpack、rollup等等
  7. CommonJS、AMD、CMD、UMD等代码规范之间的转化
  8. CoffeeScript、TypeScript、JSX等转化为原生Javascript

语法解析 ​

这个过程会将由字符组成的字符串分解成有意义的代码块，这些代码块被称为词法单元（token）,考虑程序 let a = 1 这段程序通常会被分解为下面这些词法单元：let、a、=、2

词法解析 ​

将词法单元流（数组）转换成一个元素逐级嵌套所组成的代表了程序语法结构的树，这个树被称之为抽象语法树（Abstract Syntax Tree）

js
let a = 1

--->

json
{
    "type": "VariableDeclaration",
    "start": 179,
    "end": 189,
    "declarations": [
    {
        "type": "VariableDeclarator",
        "start": 183,
        "end": 188,
        "id": {
        "type": "Identifier",
        "start": 183,
        "end": 184,
        "name": "a"
        },
        "init": {
        "type": "Literal",
        "start": 187,
        "end": 188,
        "value": 1,
        "raw": "1"
        }
    }
    ],
    "kind": "let"
}

Electron ​

https