聊聊Babel背后到底执行了什么？

babel背后到底执行了什么?

创新互联专注于企业全网营销推广、网站重做改版、城北网站定制设计、自适应品牌网站建设、H5响应式网站、商城网站制作、集团公司官网建设、成都外贸网站建设公司、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为城北等各大城市提供网站开发制作服务。

babel对于大多数前端开发人员来说，不陌生，但是背后的原理是黑盒。

我们需要了解babel背后的原理在我们开发中广泛应用。

一、babel简单应用

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

经过babel转译之后，代码变成这样

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

那我们应该知道了babel定位：babel将ES6新引进的语法转换为浏览器可以运行的ES5语法。

二、babel背后

babel过程：解析----转换---生成。

babel背后过程

我们看到一个叫AST(抽象语法树)的东西。

主要三个过程：

  • 解析：将代码(字符串)转换为AST(抽象语法树)。
  • 转换：访问AST的节点进行变化操作生成新的AST。
  • 生成：以新的AST为基础生成代码

三、过程1：代码解析(parse)

代码解析(parse)将一段代码解析成一个数据结构。其中主要关键步骤：

  • 词法分析：代码(字符串)分割成token流。即语法单元组成的数组。
  • 语法分析：分析token流(生成的数组)生成AST。

3.1词法分析

词法分析，首先明白JS中哪些属于语法单元?

  • 数字：js中科学计数法以及普通数组都是语法单元。
  • 括号：(和)只要出现，不管意义都算是语法单元。
  • 标识符：连续字符，常见变量，常量，关键字等等
  • 运算符：+，-，*，/等。
  • 注释和中括号。

我们来看一下简单的词法分析器(Tokenizer)

 
 
 
 
      
  
  
  
  1. // 词法分析器,接收字符串返回token数组 
    2.   
  
  
  
  2. export const tokenizer = (code) => { 
    3.   
  
  
  
  3.     // 储存 token 的数组 
    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.         // 我们接着处理标识符,标识符一般为以字母、_、$开头的连续字符 
    20.   
  
  
  
  20.         if (/[a-zA-Z\$\_]/.test(char)) { 
    21.   
  
  
  
  21.             let value = ''; 
    22.   
  
  
  
  22.             value += char; 
    23.   
  
  
  
  23.             current ++; 
    24.   
  
  
  
  24.             // 如果是连续字那么将其拼接在一起,随后指针后移 
    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.             // 当 = 后面有 > 时为箭头函数而非运算符 
    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.

上述的这个词法分析器：主要是针对例子的箭头函数。

3.2语法分析

语法分析之所以复杂,是因为要分析各种语法的可能性,需要开发者根据token流(上一节我们生成的 token 数组)提供的信息来分析出代码之间的逻辑关系,只有经过词法分析 token 流才能成为有结构的抽象语法树.

做语法分析最好依照标准,大多数 JavaScript Parser 都遵循estree规范

1、语句(Statements): 语句是 JavaScript 中非常常见的语法,我们常见的循环、if 判断、异常处理语句、with 语句等等都属于语句。

2、表达式(Expressions): 表达式是一组代码的集合，它返回一个值,表达式是另一个十分常见的语法,函数表达式就是一种典型的表达式,如果你不理解什么是表达式, MDN上有很详细的解释.

3、声明(Declarations): 声明分为变量声明和函数声明,表达式(Expressions)中的函数表达式的例子用声明的写法就是下面这样.

 
 
 
 
      
  
  
  
  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.             // 如果跟着 '=' 那么后面应该是个表达式或者常量之类的,额外判断的代码就忽略了,直接解析函数表达式 
    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.             // 如果括号后跟着箭头,那么判断是箭头函数表达式 
    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.                     // 解析箭头函数的参数 
    58.   
  
  
  
  58.                     init.params = parseParams(); 
    59.   
  
  
  
  59.                     // 解析箭头函数的函数主体 
    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.     // 指针后移的函数 
    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.     // 指针暂存的函数 
    128.   
  
  
  
  128.     const setTem = () => { 
    129.   
  
  
  
  129.         tem.push(current); 
    130.   
  
  
  
  130.     }; 
    131.   
  
  
  
  131.     // 指针回退的函数 
    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：代码转换

  • 代码解析和代码生成是babel。
  • 代码转换是babel插件

比如taro就是用babel完成小程序语法转换。

代码转换的关键是根据当前的抽象语法树，以我们定义的规则生成新的抽象语法树。转换的过程就是新的抽象语法树生成过程。

代码转换的具体过程：

  • 遍历抽象语法树(实现遍历器traverser)
  • 代码转换(实现转换器transformer)

五、过程3：代码转换生成代码(实现生成器generator)

生成代码这一步实际上是根据我们转换后的抽象语法树来生成新的代码,我们会实现一个函数, 他接受一个对象( ast),通过递归生成最终的代码

六、核心原理

Babel 的核心代码是 babel-core 这个 package，Babel 开放了接口，让我们可以自定义 Visitor，在AST转换时被调用。所以 Babel 的仓库中还包括了很多插件，真正实现语法转换的其实是这些插件，而不是 babel-core 本身。

新闻名称：聊聊Babel背后到底执行了什么？
当前网址：http://www.shufengxianlan.com/qtweb/news24/19974.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

虚拟主机知识

各行业网站

四川搅拌罐车　　 　眉山电信机房　　 　和县翔豪网站　　 　成都网站改版公司　　 　网站制作公司　　 　成都微信二次开发　　 　东方电机技改服务有限公司　　 　时嘉做网站　　 　网站维护报价　　 　成都茶叶销售　　 　服务器租用　　 　成都服务器托管　　 　成都商城开发　　 　定制网站　　 　成都定制网页设计　　 　成都标志设计　　 　网站seo　　 　四川成都网站建设　　 　成都服务器租用　　 　定制网站设计