聊聊Babel背后到底執(zhí)行了什么？
babel背后到底執(zhí)行了什么?
babel對(duì)于大多數(shù)前端開(kāi)發(fā)人員來(lái)說(shuō)，不陌生，但是背后的原理是黑盒。
我們需要了解babel背后的原理在我們開(kāi)發(fā)中廣泛應(yīng)用。
一、babel簡(jiǎn)單應(yīng)用
- [1,2,3].map(n => n+1);
經(jīng)過(guò)babel轉(zhuǎn)譯之后，代碼變成這樣
- [1,2,3].map(function(n){
- return n + 1;
- })
那我們應(yīng)該知道了babel定位：babel將ES6新引進(jìn)的語(yǔ)法轉(zhuǎn)換為瀏覽器可以運(yùn)行的ES5語(yǔ)法。
二、babel背后
babel過(guò)程：解析----轉(zhuǎn)換---生成。
babel背后過(guò)程
我們看到一個(gè)叫AST(抽象語(yǔ)法樹(shù))的東西。
主要三個(gè)過(guò)程：
- 解析：將代碼(字符串)轉(zhuǎn)換為AST(抽象語(yǔ)法樹(shù))。
- 轉(zhuǎn)換：訪問(wèn)AST的節(jié)點(diǎn)進(jìn)行變化操作生成新的AST。
- 生成：以新的AST為基礎(chǔ)生成代碼
三、過(guò)程1：代碼解析(parse)
代碼解析(parse)將一段代碼解析成一個(gè)數(shù)據(jù)結(jié)構(gòu)。其中主要關(guān)鍵步驟：
- 詞法分析：代碼(字符串)分割成token流。即語(yǔ)法單元組成的數(shù)組。
- 語(yǔ)法分析：分析token流(生成的數(shù)組)生成AST。
3.1詞法分析
詞法分析，首先明白JS中哪些屬于語(yǔ)法單元?
- 數(shù)字：js中科學(xué)計(jì)數(shù)法以及普通數(shù)組都是語(yǔ)法單元。
- 括號(hào)：(和)只要出現(xiàn)，不管意義都算是語(yǔ)法單元。
- 標(biāo)識(shí)符：連續(xù)字符，常見(jiàn)變量，常量，關(guān)鍵字等等
- 運(yùn)算符：+，-，*，/等。
- 注釋和中括號(hào)。
我們來(lái)看一下簡(jiǎn)單的詞法分析器(Tokenizer)
- // 詞法分析器,接收字符串返回token數(shù)組
- export const tokenizer = (code) => {
- // 儲(chǔ)存 token 的數(shù)組
- const tokens = [];
- // 指針
- let current = 0;
- while (current < code.length) {
- // 獲取指針指向的字符
- const char = code[current];
- // 我們先處理單字符的語(yǔ)法單元 類(lèi)似于`;` `(` `)`等等這種
- if (char === '(' || char === ')') {
- tokens.push({
- type: 'parens',
- value: char,
- });
- current ++;
- continue;
- }
- // 我們接著處理標(biāo)識(shí)符,標(biāo)識(shí)符一般為以字母、_、$開(kāi)頭的連續(xù)字符
- if (/[a-zA-Z\$\_]/.test(char)) {
- let value = '';
- value += char;
- current ++;
- // 如果是連續(xù)字那么將其拼接在一起,隨后指針后移
- while (/[a-zA-Z0-9\$\_]/.test(code[current]) && current < code.length) {
- value += code[current];
- current ++;
- }
- tokens.push({
- type: 'identifier',
- value,
- });
- continue;
- }
- // 處理空白字符
- if (/\s/.test(char)) {
- let value = '';
- value += char;
- current ++;
- //道理同上
- while (/\s]/.test(code[current]) && current < code.length) {
- value += code[current];
- current ++;
- }
- tokens.push({
- type: 'whitespace',
- value,
- });
- continue;
- }
- // 處理逗號(hào)分隔符
- if (/,/.test(char)) {
- tokens.push({
- type: ',',
- value: ',',
- });
- current ++;
- continue;
- }
- // 處理運(yùn)算符
- if (/=|\+|>/.test(char)) {
- let value = '';
- value += char;
- current ++;
- while (/=|\+|>/.test(code[current])) {
- value += code[current];
- current ++;
- }
- // 當(dāng) = 后面有 > 時(shí)為箭頭函數(shù)而非運(yùn)算符
- if (value === '=>') {
- tokens.push({
- type: 'ArrowFunctionExpression',
- value,
- });
- continue;
- }
- tokens.push({
- type: 'operator',
- value,
- });
- continue;
- }
- // 如果碰到我們?cè)~法分析器以外的字符,則報(bào)錯(cuò)
- throw new TypeError('I dont know what this character is: ' + char);
- }
- return tokens;
- };
上述的這個(gè)詞法分析器：主要是針對(duì)例子的箭頭函數(shù)。
3.2語(yǔ)法分析
語(yǔ)法分析之所以復(fù)雜,是因?yàn)橐治龈鞣N語(yǔ)法的可能性,需要開(kāi)發(fā)者根據(jù)token流(上一節(jié)我們生成的 token 數(shù)組)提供的信息來(lái)分析出代碼之間的邏輯關(guān)系,只有經(jīng)過(guò)詞法分析 token 流才能成為有結(jié)構(gòu)的抽象語(yǔ)法樹(shù).
做語(yǔ)法分析最好依照標(biāo)準(zhǔn),大多數(shù) JavaScript Parser 都遵循estree規(guī)范
1、語(yǔ)句(Statements): 語(yǔ)句是 JavaScript 中非常常見(jiàn)的語(yǔ)法,我們常見(jiàn)的循環(huán)、if 判斷、異常處理語(yǔ)句、with 語(yǔ)句等等都屬于語(yǔ)句。
2、表達(dá)式(Expressions): 表達(dá)式是一組代碼的集合，它返回一個(gè)值,表達(dá)式是另一個(gè)十分常見(jiàn)的語(yǔ)法,函數(shù)表達(dá)式就是一種典型的表達(dá)式,如果你不理解什么是表達(dá)式, MDN上有很詳細(xì)的解釋.
3、聲明(Declarations): 聲明分為變量聲明和函數(shù)聲明,表達(dá)式(Expressions)中的函數(shù)表達(dá)式的例子用聲明的寫(xiě)法就是下面這樣.
- const parser = tokens => {
- // 聲明一個(gè)全時(shí)指針，它會(huì)一直存在
- let current = -1;
- // 聲明一個(gè)暫存棧,用于存放臨時(shí)指針
- const tem = [];
- // 指針指向的當(dāng)前token
- let token = tokens[current];
- const parseDeclarations = () => {
- // 暫存當(dāng)前指針
- setTem();
- // 指針后移
- next();
- // 如果字符為'const'可見(jiàn)是一個(gè)聲明
- if (token.type === 'identifier' && token.value === 'const') {
- const declarations = {
- type: 'VariableDeclaration',
- kind: token.value
- };
- next();
- // const 后面要跟變量的,如果不是則報(bào)錯(cuò)
- if (token.type !== 'identifier') {
- throw new Error('Expected Variable after const');
- }
- // 我們獲取到了變量名稱(chēng)
- declarations.identifierName = token.value;
- next();
- // 如果跟著 '=' 那么后面應(yīng)該是個(gè)表達(dá)式或者常量之類(lèi)的,額外判斷的代碼就忽略了,直接解析函數(shù)表達(dá)式
- if (token.type === 'operator' && token.value === '=') {
- declarations.init = parseFunctionExpression();
- }
- return declarations;
- }
- };
- const parseFunctionExpression = () => {
- next();
- let init;
- // 如果 '=' 后面跟著括號(hào)或者字符那基本判斷是一個(gè)表達(dá)式
- if (
- (token.type === 'parens' && token.value === '(') ||
- token.type === 'identifier'
- ) {
- setTem();
- next();
- while (token.type === 'identifier' || token.type === ',') {
- next();
- }
- // 如果括號(hào)后跟著箭頭,那么判斷是箭頭函數(shù)表達(dá)式
- if (token.type === 'parens' && token.value === ')') {
- next();
- if (token.type === 'ArrowFunctionExpression') {
- init = {
- type: 'ArrowFunctionExpression',
- params: [],
- body: {}
- };
- backTem();
- // 解析箭頭函數(shù)的參數(shù)
- init.params = parseParams();
- // 解析箭頭函數(shù)的函數(shù)主體
- init.body = parseExpression();
- } else {
- backTem();
- }
- }
- }
- return init;
- };
- const parseParams = () => {
- const params = [];
- if (token.type === 'parens' && token.value === '(') {
- next();
- while (token.type !== 'parens' && token.value !== ')') {
- if (token.type === 'identifier') {
- params.push({
- type: token.type,
- identifierName: token.value
- });
- }
- next();
- }
- }
- return params;
- };
- const parseExpression = () => {
- next();
- let body;
- while (token.type === 'ArrowFunctionExpression') {
- next();
- }
- // 如果以(開(kāi)頭或者變量開(kāi)頭說(shuō)明不是 BlockStatement,我們以二元表達(dá)式來(lái)解析
- if (token.type === 'identifier') {
- body = {
- type: 'BinaryExpression',
- left: {
- type: 'identifier',
- identifierName: token.value
- },
- operator: '',
- right: {
- type: '',
- identifierName: ''
- }
- };
- next();
- if (token.type === 'operator') {
- body.operator = token.value;
- }
- next();
- if (token.type === 'identifier') {
- body.right = {
- type: 'identifier',
- identifierName: token.value
- };
- }
- }
- return body;
- };
- // 指針后移的函數(shù)
- const next = () => {
- do {
- ++current;
- token = tokens[current]
- ? tokens[current]
- : { type: 'eof', value: '' };
- } while (token.type === 'whitespace');
- };
- // 指針暫存的函數(shù)
- const setTem = () => {
- tem.push(current);
- };
- // 指針回退的函數(shù)
- const backTem = () => {
- current = tem.pop();
- token = tokens[current];
- };
- const ast = {
- type: 'Program',
- body: []
- };
- while (current < tokens.length) {
- const statement = parseDeclarations();
- if (!statement) {
- break;
- }
- ast.body.push(statement);
- }
- return ast;
- };
四、過(guò)程2：代碼轉(zhuǎn)換
- 代碼解析和代碼生成是babel。
- 代碼轉(zhuǎn)換是babel插件
比如taro就是用babel完成小程序語(yǔ)法轉(zhuǎn)換。
代碼轉(zhuǎn)換的關(guān)鍵是根據(jù)當(dāng)前的抽象語(yǔ)法樹(shù)，以我們定義的規(guī)則生成新的抽象語(yǔ)法樹(shù)。轉(zhuǎn)換的過(guò)程就是新的抽象語(yǔ)法樹(shù)生成過(guò)程。
代碼轉(zhuǎn)換的具體過(guò)程：
- 遍歷抽象語(yǔ)法樹(shù)(實(shí)現(xiàn)遍歷器traverser)
- 代碼轉(zhuǎn)換(實(shí)現(xiàn)轉(zhuǎn)換器transformer)
五、過(guò)程3：代碼轉(zhuǎn)換生成代碼(實(shí)現(xiàn)生成器generator)
生成代碼這一步實(shí)際上是根據(jù)我們轉(zhuǎn)換后的抽象語(yǔ)法樹(shù)來(lái)生成新的代碼,我們會(huì)實(shí)現(xiàn)一個(gè)函數(shù), 他接受一個(gè)對(duì)象( ast),通過(guò)遞歸生成最終的代碼
六、核心原理
Babel 的核心代碼是 babel-core 這個(gè) package，Babel 開(kāi)放了接口，讓我們可以自定義 Visitor，在AST轉(zhuǎn)換時(shí)被調(diào)用。所以 Babel 的倉(cāng)庫(kù)中還包括了很多插件，真正實(shí)現(xiàn)語(yǔ)法轉(zhuǎn)換的其實(shí)是這些插件，而不是 babel-core 本身。
