日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關咨詢
選擇下列產(chǎn)品馬上在線溝通
服務時間：8:30-17:00
你可能遇到了下面的問題
關閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
聊聊Babel背后到底執(zhí)行了什么？

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

創(chuàng)新互聯(lián)專注于企業(yè)全網(wǎng)營銷推廣、網(wǎng)站重做改版、城北網(wǎng)站定制設計、自適應品牌網(wǎng)站建設、H5響應式網(wǎng)站、商城網(wǎng)站制作、集團公司官網(wǎng)建設、成都外貿(mào)網(wǎng)站建設公司、高端網(wǎng)站制作、響應式網(wǎng)頁設計等建站業(yè)務，價格優(yōu)惠性價比高，為城北等各大城市提供網(wǎng)站開發(fā)制作服務。

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

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

一、babel簡單應用

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

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

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

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

二、babel背后

babel過程：解析----轉(zhuǎn)換---生成。

babel背后過程

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

主要三個過程：

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

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

四、過程2：代碼轉(zhuǎn)換

  • 代碼解析和代碼生成是babel。
  • 代碼轉(zhuǎn)換是babel插件

比如taro就是用babel完成小程序語法轉(zhuǎn)換。

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

代碼轉(zhuǎn)換的具體過程：

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

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

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

六、核心原理

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


網(wǎng)頁題目：聊聊Babel背后到底執(zhí)行了什么？
標題鏈接：http://www.dlmjj.cn/article/dppciec.html