文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2024-12-14 00:50

关注

babel背后到底执行了什么?

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

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

一、babel简单应用

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

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

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

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

二、babel背后

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

babel背后过程

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

主要三个过程:

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

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

3.1词法分析

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

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

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

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

3.2语法分析

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

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

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

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

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

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

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

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

代码转换的具体过程:

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

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

六、核心原理

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

 

来源:松宝写代码内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯