資訊專欄INFORMATION COLUMN
摘要：簡(jiǎn)單來說就是一個(gè)對(duì)于代碼的一個(gè)編譯過程，進(jìn)行了詞法分析與語法分析的過程。轉(zhuǎn)換對(duì)于進(jìn)行變換一系列的操作，接受得到并通過對(duì)其進(jìn)行遍歷，在此過程中進(jìn)行添加更新及移除等操作。而模塊則是將三者結(jié)合使得對(duì)外提供的做了一個(gè)簡(jiǎn)化。
直奔主題
對(duì)于js，AST能干什么？
babel將es6轉(zhuǎn)es5
mpvue、taro等將js轉(zhuǎn)為小程序
定制插件刪除注釋、console等
ps: 本文只探討AST的概念以及使用，編譯原理的其他知識(shí)不做太多描述
工具庫@babel/core
用來解析AST以及將AST生成代碼
@babel/types
構(gòu)建新的AST節(jié)點(diǎn)
前置知識(shí) - 編譯原理概述毫無疑問js是一個(gè)解釋型語言，有疑問可以參考這篇文章
所以這里只簡(jiǎn)單描述一下babel的編譯過程（大霧），有興趣了解編譯型語言詳細(xì)編譯過程的可以看這本 《編譯原理》
和編譯器類似，babel 的轉(zhuǎn)譯過程也分為三個(gè)階段，這三步具體是：生成AST解析 Parse
將代碼解析生成抽象語法樹( 即AST )，也就是計(jì)算機(jī)理解我們代碼的方式(擴(kuò)展：一般來說每個(gè) js 引擎都有自己的 AST，比如熟知的 v8，chrome 瀏覽器會(huì)把 js 源碼轉(zhuǎn)換為抽象語法樹，再進(jìn)一步轉(zhuǎn)換為字節(jié)碼或機(jī)器代碼)，而 babel 則是通過babylon 實(shí)現(xiàn)的 。簡(jiǎn)單來說就是一個(gè)對(duì)于 JS 代碼的一個(gè)編譯過程，進(jìn)行了詞法分析與語法分析的過程。轉(zhuǎn)換 Transform
對(duì)于 AST 進(jìn)行變換一系列的操作，babel 接受得到 AST 并通過 babel-traverse 對(duì)其進(jìn)行遍歷，在此過程中進(jìn)行添加、更新及移除等操作。生成 Generate
將變換后的 AST 再轉(zhuǎn)換為 JS 代碼, 使用到的模塊是 babel-generator。而 babel-core 模塊則是將三者結(jié)合使得對(duì)外提供的API做了一個(gè)簡(jiǎn)化。
demo.js是我隨便copy來的一段代碼
isLeapYear()
function isLeapYear(year) {
const cond1 = year % 4 == 0; //條件1：年份必須要能被4整除
const cond2 = year % 100 != 0; //條件2：年份不能是整百數(shù)
const cond3 = year % 400 ==0; //條件3：年份是400的倍數(shù)
const cond = cond1 && cond2 || cond3;
console.log(cond)
if(cond) {
alert(year + "是閏年");
return true;
} else {
alert(year + "不是閏年");
return false;
}
}
現(xiàn)在我要把它轉(zhuǎn)成AST，這里使用@babel/core來解析，它提供了一個(gè)parse方法來將代碼轉(zhuǎn)化為AST。
parse.ts就是我的解析工具
import * as fs from "fs"
import * as path from "path"
import { parse} from "@babel/core"
const js_path = path.resolve(__dirname, "../demo.js")
let code = fs.readFileSync(js_path, {
encoding: "utf-8"
})
const js_ast = parse(code)
console.log(js_ast)
可以看到AST結(jié)果如下：
結(jié)果太長就不一一解析了，只說type屬性，就表示了這一行代碼做了什么，VariableDeclaration就表示這是一句聲明語句, CallExpression則代表這是一個(gè)調(diào)用函數(shù)的語句
將AST轉(zhuǎn)回代碼@babel/core提供了一個(gè)transform方法，輸入代碼和修改代碼的規(guī)則，輸出修改過的AST，它看起來是這樣的:
const ArrowPlugins = {
visitor: {
VariableDeclaration(path: NodePath) {
// ...
},
CallExpression(path: NodePath) {
// ...
}
}
}
const d = transform(code, {
plugins: [
ArrowPlugins
]
})
當(dāng)命中對(duì)應(yīng)的type時(shí)就會(huì)走進(jìn)相應(yīng)的回調(diào)函數(shù)，接下來寫個(gè)小
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/105471.html
摘要：為什么要談抽象語法樹如果你查看目前任何主流的項(xiàng)目中的，會(huì)發(fā)現(xiàn)前些年的不計(jì)其數(shù)的插件誕生。什么是抽象語法樹估計(jì)很多同學(xué)會(huì)和圖中的喵一樣，看完這段官方的定義一臉懵逼。它讀取我們的代碼，然后把它們按照預(yù)定的規(guī)則合并成一個(gè)個(gè)的標(biāo)識(shí)。 前言 首先，先說明下該文章是譯文，原文出自《AST for JavaScript developers》。很少花時(shí)間特地翻譯一篇文章，咬文嚼字是件很累的事情，實(shí)在...
摘要：前言虛擬語法樹是解釋器編譯器進(jìn)行語法分析的基礎(chǔ)也是眾多前端編譯工具的基礎(chǔ)工具比如等對(duì)于由于前端輪子眾多人力過于充足早已經(jīng)被人們玩膩了光是語法分析器就有等等若干種并且也有了的社區(qū)標(biāo)準(zhǔn)這篇文章主要介紹如何去寫一個(gè)解析器但是并不是通過分析而是通過 前言 虛擬語法樹(Abstract Syntax Tree, AST)是解釋器/編譯器進(jìn)行語法分析的基礎(chǔ), 也是眾多前端編譯工具的基礎(chǔ)工具, 比如...
摘要：前言虛擬語法樹是解釋器編譯器進(jìn)行語法分析的基礎(chǔ)也是眾多前端編譯工具的基礎(chǔ)工具比如等對(duì)于由于前端輪子眾多人力過于充足早已經(jīng)被人們玩膩了光是語法分析器就有等等若干種并且也有了的社區(qū)標(biāo)準(zhǔn)這篇文章主要介紹如何去寫一個(gè)解析器但是并不是通過分析而是通過 前言 虛擬語法樹(Abstract Syntax Tree, AST)是解釋器/編譯器進(jìn)行語法分析的基礎(chǔ), 也是眾多前端編譯工具的基礎(chǔ)工具, 比如...
摘要：的抽象語法樹中可能如下圖所示代碼生成將轉(zhuǎn)換為可執(zhí)行代碼的過程被稱為代碼生成。如果是，編譯器會(huì)忽略該聲明，繼續(xù)進(jìn)行編譯，否則它會(huì)要求在當(dāng)前作用域的集合中聲明一個(gè)新的變量，并命名為。 在學(xué)習(xí) javascript 的過程中，我們第一步最應(yīng)該了解和掌握的就是作用域，與之相關(guān)還有程序是怎么編譯的，變量是怎么查找的，js 引擎是什么，引擎和作用域的關(guān)系又是什么，這些是 javascript 這門...
閱讀 1485·2021-09-28 09:43
閱讀 4405·2021-09-04 16:41
閱讀 1997·2019-08-30 15:44
閱讀 3909·2019-08-30 15:43
閱讀 848·2019-08-30 14:21
閱讀 2103·2019-08-30 11:00
閱讀 3401·2019-08-29 16:20
閱讀 2051·2019-08-29 14:21
