自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

聊聊Babel背后到底執(zhí)行了什么？

作者：songEagle
開發(fā) 前端
babel對于大多數(shù)前端開發(fā)人員來說，不陌生，但是背后的原理是黑盒。我們需要了解babel背后的原理在我們開發(fā)中廣泛應用。

[[420537]]

babel背后到底執(zhí)行了什么?

babel對于大多數(shù)前端開發(fā)人員來說，不陌生，但是背后的原理是黑盒。

我們需要了解babel背后的原理在我們開發(fā)中廣泛應用。

一、babel簡單應用

  1. [1,2,3].map(n => n+1); 

經(jīng)過babel轉譯之后，代碼變成這樣

  1. [1,2,3].map(function(n){ 
  2.   return n + 1; 
  3. }) 

那我們應該知道了babel定位：babel將ES6新引進的語法轉換為瀏覽器可以運行的ES5語法。

二、babel背后

babel過程：解析----轉換---生成。

babel背后過程

我們看到一個叫AST(抽象語法樹)的東西。

主要三個過程：

  • 解析：將代碼(字符串)轉換為AST(抽象語法樹)。
  • 轉換：訪問AST的節(jié)點進行變化操作生成新的AST。
  • 生成：以新的AST為基礎生成代碼

三、過程1：代碼解析(parse)

代碼解析(parse)將一段代碼解析成一個數(shù)據(jù)結構。其中主要關鍵步驟：

  • 詞法分析：代碼(字符串)分割成token流。即語法單元組成的數(shù)組。
  • 語法分析：分析token流(生成的數(shù)組)生成AST。

3.1詞法分析

詞法分析，首先明白JS中哪些屬于語法單元?

  • 數(shù)字：js中科學計數(shù)法以及普通數(shù)組都是語法單元。
  • 括號：(和)只要出現(xiàn)，不管意義都算是語法單元。
  • 標識符：連續(xù)字符，常見變量，常量，關鍵字等等
  • 運算符：+，-，*，/等。
  • 注釋和中括號。

我們來看一下簡單的詞法分析器(Tokenizer)

  1. // 詞法分析器,接收字符串返回token數(shù)組 
  2. export const tokenizer = (code) => { 
  3.     // 儲存 token 的數(shù)組 
  4.     const tokens  = []; 
  5.     // 指針 
  6.     let current = 0; 
  7.     while (current < code.length) { 
  8.         // 獲取指針指向的字符 
  9.         const char = code[current]; 
  10.         // 我們先處理單字符的語法單元 類似于`;` `(` `)`等等這種 
  11.         if (char === '(' || char === ')') { 
  12.             tokens.push({ 
  13.                 type: 'parens', 
  14.                 value: char, 
  15.             }); 
  16.             current ++; 
  17.             continue; 
  18.         } 
  19.         // 我們接著處理標識符,標識符一般為以字母、_、$開頭的連續(xù)字符 
  20.         if (/[a-zA-Z\$\_]/.test(char)) { 
  21.             let value = ''; 
  22.             value += char; 
  23.             current ++; 
  24.             // 如果是連續(xù)字那么將其拼接在一起,隨后指針后移 
  25.             while (/[a-zA-Z0-9\$\_]/.test(code[current]) && current < code.length) { 
  26.                 value += code[current]; 
  27.                 current ++; 
  28.             } 
  29.             tokens.push({ 
  30.                 type: 'identifier', 
  31.                 value, 
  32.             }); 
  33.             continue; 
  34.         } 
  35.         // 處理空白字符 
  36.         if (/\s/.test(char)) { 
  37.             let value = ''; 
  38.             value += char; 
  39.             current ++; 
  40.             //道理同上 
  41.             while (/\s]/.test(code[current]) && current < code.length) { 
  42.                 value += code[current]; 
  43.                 current ++; 
  44.             } 
  45.             tokens.push({ 
  46.                 type: 'whitespace', 
  47.                 value, 
  48.             }); 
  49.             continue; 
  50.         } 
  51.         // 處理逗號分隔符 
  52.         if (/,/.test(char)) { 
  53.             tokens.push({ 
  54.                 type: ',', 
  55.                 value: ',', 
  56.             }); 
  57.             current ++; 
  58.             continue; 
  59.         } 
  60.         // 處理運算符 
  61.         if (/=|\+|>/.test(char)) { 
  62.             let value = ''; 
  63.             value += char; 
  64.             current ++; 
  65.             while (/=|\+|>/.test(code[current])) { 
  66.                 value += code[current]; 
  67.                 current ++; 
  68.             } 
  69.             // 當 = 后面有 > 時為箭頭函數(shù)而非運算符 
  70.             if (value === '=>') { 
  71.                 tokens.push({ 
  72.                     type: 'ArrowFunctionExpression', 
  73.                     value, 
  74.                 }); 
  75.                 continue; 
  76.             } 
  77.             tokens.push({ 
  78.                 type: 'operator', 
  79.                 value, 
  80.             }); 
  81.             continue; 
  82.         } 
  83.         // 如果碰到我們詞法分析器以外的字符,則報錯 
  84.         throw new TypeError('I dont know what this character is: ' + char); 
  85.     } 
  86.     return tokens; 
  87. }; 

上述的這個詞法分析器：主要是針對例子的箭頭函數(shù)。

3.2語法分析

語法分析之所以復雜,是因為要分析各種語法的可能性,需要開發(fā)者根據(jù)token流(上一節(jié)我們生成的 token 數(shù)組)提供的信息來分析出代碼之間的邏輯關系,只有經(jīng)過詞法分析 token 流才能成為有結構的抽象語法樹.

做語法分析最好依照標準,大多數(shù) JavaScript Parser 都遵循estree規(guī)范

1、語句(Statements): 語句是 JavaScript 中非常常見的語法,我們常見的循環(huán)、if 判斷、異常處理語句、with 語句等等都屬于語句。

2、表達式(Expressions): 表達式是一組代碼的集合，它返回一個值,表達式是另一個十分常見的語法,函數(shù)表達式就是一種典型的表達式,如果你不理解什么是表達式, MDN上有很詳細的解釋.

3、聲明(Declarations): 聲明分為變量聲明和函數(shù)聲明,表達式(Expressions)中的函數(shù)表達式的例子用聲明的寫法就是下面這樣.

  1. const parser = tokens => { 
  2.     // 聲明一個全時指針，它會一直存在 
  3.     let current = -1; 
  4.     // 聲明一個暫存棧,用于存放臨時指針 
  5.     const tem = []; 
  6.     // 指針指向的當前token 
  7.     let token = tokens[current]; 
  8.     const parseDeclarations = () => { 
  9.         // 暫存當前指針 
  10.         setTem(); 
  11.         // 指針后移 
  12.         next(); 
  13.         // 如果字符為'const'可見是一個聲明 
  14.         if (token.type === 'identifier' && token.value === 'const') { 
  15.             const declarations = { 
  16.                 type: 'VariableDeclaration', 
  17.                 kind: token.value 
  18.             }; 
  19.             next(); 
  20.             // const 后面要跟變量的,如果不是則報錯 
  21.             if (token.type !== 'identifier') { 
  22.                 throw new Error('Expected Variable after const'); 
  23.             } 
  24.             // 我們獲取到了變量名稱 
  25.             declarations.identifierName = token.value; 
  26.             next(); 
  27.             // 如果跟著 '=' 那么后面應該是個表達式或者常量之類的,額外判斷的代碼就忽略了,直接解析函數(shù)表達式 
  28.             if (token.type === 'operator' && token.value === '=') { 
  29.                 declarations.init = parseFunctionExpression(); 
  30.             } 
  31.             return declarations; 
  32.         } 
  33.     }; 
  34.     const parseFunctionExpression = () => { 
  35.         next(); 
  36.         let init; 
  37.         // 如果 '=' 后面跟著括號或者字符那基本判斷是一個表達式 
  38.         if ( 
  39.             (token.type === 'parens' && token.value === '(') || 
  40.             token.type === 'identifier' 
  41.         ) { 
  42.             setTem(); 
  43.             next(); 
  44.             while (token.type === 'identifier' || token.type === ',') { 
  45.                 next(); 
  46.             } 
  47.             // 如果括號后跟著箭頭,那么判斷是箭頭函數(shù)表達式 
  48.             if (token.type === 'parens' && token.value === ')') { 
  49.                 next(); 
  50.                 if (token.type === 'ArrowFunctionExpression') { 
  51.                     init = { 
  52.                         type: 'ArrowFunctionExpression', 
  53.                         params: [], 
  54.                         body: {} 
  55.                     }; 
  56.                     backTem(); 
  57.                     // 解析箭頭函數(shù)的參數(shù) 
  58.                     init.params = parseParams(); 
  59.                     // 解析箭頭函數(shù)的函數(shù)主體 
  60.                     init.body = parseExpression(); 
  61.                 } else { 
  62.                     backTem(); 
  63.                 } 
  64.             } 
  65.         } 
  66.         return init; 
  67.     }; 
  68.     const parseParams = () => { 
  69.         const params = []; 
  70.         if (token.type === 'parens' && token.value === '(') { 
  71.             next(); 
  72.             while (token.type !== 'parens' && token.value !== ')') { 
  73.                 if (token.type === 'identifier') { 
  74.                     params.push({ 
  75.                         type: token.type, 
  76.                         identifierName: token.value 
  77.                     }); 
  78.                 } 
  79.                 next(); 
  80.             } 
  81.         } 
  82.         return params; 
  83.     }; 
  84.     const parseExpression = () => { 
  85.         next(); 
  86.         let body; 
  87.         while (token.type === 'ArrowFunctionExpression') { 
  88.             next(); 
  89.         } 
  90.         // 如果以(開頭或者變量開頭說明不是 BlockStatement,我們以二元表達式來解析 
  91.         if (token.type === 'identifier') { 
  92.             body = { 
  93.                 type: 'BinaryExpression', 
  94.                 left: { 
  95.                     type: 'identifier', 
  96.                     identifierName: token.value 
  97.                 }, 
  98.                 operator: '', 
  99.                 right: { 
  100.                     type: '', 
  101.                     identifierName: '' 
  102.                 } 
  103.             }; 
  104.             next(); 
  105.             if (token.type === 'operator') { 
  106.                 body.operator = token.value; 
  107.             } 
  108.             next(); 
  109.             if (token.type === 'identifier') { 
  110.                 body.right = { 
  111.                     type: 'identifier', 
  112.                     identifierName: token.value 
  113.                 }; 
  114.             } 
  115.         } 
  116.         return body; 
  117.     }; 
  118.     // 指針后移的函數(shù) 
  119.     const next = () => { 
  120.         do { 
  121.             ++current; 
  122.             token = tokens[current] 
  123.                 ? tokens[current] 
  124.                 : { type: 'eof', value: '' }; 
  125.         } while (token.type === 'whitespace'); 
  126.     }; 
  127.     // 指針暫存的函數(shù) 
  128.     const setTem = () => { 
  129.         tem.push(current); 
  130.     }; 
  131.     // 指針回退的函數(shù) 
  132.     const backTem = () => { 
  133.         current = tem.pop(); 
  134.         token = tokens[current]; 
  135.     }; 
  136.     const ast = { 
  137.         type: 'Program', 
  138.         body: [] 
  139.     }; 
  140.     while (current < tokens.length) { 
  141.         const statement = parseDeclarations(); 
  142.         if (!statement) { 
  143.             break; 
  144.         } 
  145.         ast.body.push(statement); 
  146.     } 
  147.     return ast; 
  148. }; 

四、過程2：代碼轉換

  • 代碼解析和代碼生成是babel。
  • 代碼轉換是babel插件

比如taro就是用babel完成小程序語法轉換。

代碼轉換的關鍵是根據(jù)當前的抽象語法樹，以我們定義的規(guī)則生成新的抽象語法樹。轉換的過程就是新的抽象語法樹生成過程。

代碼轉換的具體過程：

  • 遍歷抽象語法樹(實現(xiàn)遍歷器traverser)
  • 代碼轉換(實現(xiàn)轉換器transformer)

五、過程3：代碼轉換生成代碼(實現(xiàn)生成器generator)

生成代碼這一步實際上是根據(jù)我們轉換后的抽象語法樹來生成新的代碼,我們會實現(xiàn)一個函數(shù), 他接受一個對象( ast),通過遞歸生成最終的代碼

六、核心原理

Babel 的核心代碼是 babel-core 這個 package，Babel 開放了接口，讓我們可以自定義 Visitor，在AST轉換時被調(diào)用。所以 Babel 的倉庫中還包括了很多插件，真正實現(xiàn)語法轉換的其實是這些插件，而不是 babel-core 本身。

 

責任編輯：姜華 來源： 松寶寫代碼
Babel前端開發(fā)
相關推薦

2025-04-27 08:11:26

2022-03-17 21:30:31

BRAS寬帶服務器

2020-07-02 14:30:12

SDNSDON交換機

2023-01-11 09:56:41

鎖索引SQL

2022-05-31 09:17:08

通信網(wǎng)絡技術

2024-02-22 10:17:39

AI模型

2022-05-26 00:19:29

通信信息5G

2021-04-24 12:01:08

MySQL數(shù)據(jù)庫Mysql執(zhí)行計劃

2021-09-05 18:26:42

2021-06-26 07:18:15

JscodeshiftBabel節(jié)點

2023-11-12 21:58:41

Java“假死”

2022-02-23 08:18:06

nginx前端location

2017-09-22 13:24:20

2021-09-13 15:35:14

戴爾

2018-02-23 08:50:14

AI開源辦公環(huán)境

2021-03-17 09:35:51

MySQL數(shù)據(jù)庫explain

2021-11-15 11:08:02

微軟蘋果商業(yè)模式

2020-01-10 08:54:24

URLDNSTCP

2019-01-24 08:33:42

微信騰訊抖音
點贊
收藏

51CTO技術棧公眾號