什麼是編譯

程式中一段原始碼經過parse（解析）、transform(轉換)、generate(生成) 三個階段，這三個階段統稱為編譯

編譯過程詳解

分詞/詞法分析 解析

1 分詞：Tokenizing

分詞是對程式碼進行有規律的切分，例如一下

//會被切分為 var、 a、 = 、 2  
var a  =  2;

會將程式碼根預設定的語法判斷進行不同的切割，這些被切割下來的單元就是詞法單元

2 詞法分析：Lexing

詞法分析與分詞存在一定差異，主要差異在於可以對單元進行狀態的判斷
例如 a 屬於獨立的一個詞法單元，或與一個完整的詞法單元存在被包含的關係，則判定為歸屬關係，呼叫的是有狀態的解析規則

解析/語法分析（Parsing）轉換

》這個過程是將詞法單元流（陣列）轉換為一個由元素逐級巢狀所組成的代表了程式語法結構的樹。這個樹被稱為“抽象語法樹”
(Abstract Syntax Tree,AsT).

類似下面這個結構

//模板生成
/* 
<username name="123" id=3>
 賬號：土豆絲
</username>
<password name="777" id =4>
 密碼：potato
 <p>請勿填寫非法字元</p>
</password>
*/
{
username:{
name: "123",
id:3
text:"賬號：土豆絲"

}
password:{
name:"777"
id:4
text：“密碼：potato”
p:{
 text:"請勿填寫非法字元"
}
}
}

 

以上 是一個模板生成的抽象語法樹，我們可以一個元素通過轉換為類陣列物件（抽象語法樹 ast），將他進行相互轉換

程式碼生成 生成(generator)

將ast轉化 為可執行程式碼被稱為生成

在React 中我們使用

import React from "react";
ReactDOM.render(
<login/>
)

對其從AST抽象語法樹重新轉換成元素標籤進行渲染
vue和react都具備render函式的實現