Babel 是如何把 ES6 轉(zhuǎn)成 ES5 呢拂玻,其大致分為三步:
- 解析(parse):將代碼字符串解析成抽象語法樹挡闰,即所謂的 AST
- 轉(zhuǎn)換(transform):對 AST 進行處理,在這個階段可以對 ES6 代碼進行相應(yīng)轉(zhuǎn)換,即轉(zhuǎn)成 ES5 代碼
- 生成(generate):根據(jù)處理后的 AST 再生成代碼字符串
于此谷遂,其實我們自己就可以實現(xiàn)一個簡單的“編譯器”竭钝,用于把 ES6 代碼轉(zhuǎn)成 ES5奸忽。
可以使用 @babel/parser 的 parse 方法阎肝,將代碼字符串解析成 AST;
使用 @babel/core 的 transformFromAstSync 方法完残,對 AST 進行處理伏钠,將其轉(zhuǎn)成 ES5 并生成相應(yīng)的代碼字符串横漏,
就像vue處理模板一樣谨设,把es6代碼識別為一段字符串,根據(jù)規(guī)則轉(zhuǎn)成ast,然后根據(jù)映射表轉(zhuǎn)換成es5的語法缎浇,然后轉(zhuǎn)成es5字符串扎拣,最后轉(zhuǎn)成js