​babel背后到底执行了什么？

图片

点击上方「蓝字」关注我们

图片

babel背后到底执行了什么？

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

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

一、babel简单应用

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

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

[1,2,3].map(function(n){

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

二、babel背后

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

图片

babel背后过程

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

主要三个过程：

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

三、过程1：代码解析（parse）

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

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

3.1词法分析

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

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

我们来看一下简单的词法分析器（Tokenizer）

// 词法分析器,接收字符串返回token数组

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

3.2语法分析

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

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

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

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

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

const parser = tokens => {

四、过程2：代码转换

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

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

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

代码转换的具体过程：

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

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

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

六、核心原理

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

更多优选文章

•npm的原理•快速学习Gulp并接入到项目中（一）•diff算法深入一下？

AB实验

•AB实验：MAB多臂老虎机智能调优的基本原理•AB实验基础-专有名词•AB实验基础-AB是什么？AB的价值？为什么使用AB实验？

每日一题

•【每日一题】(58题)算法题：接雨水问题算法题：接雨水问题")•【每日一题】(57题)数组扁平化的方法有哪些？数组扁平化的方法有哪些？")•【每日一题】(56题)介绍下深度优先遍历和广度优先遍历，如何实现？介绍下深度优先遍历和广度优先遍历，如何实现？")

总结

•2020「松宝写代码」个人年终总结：未来可期

更多内推

•【字节急招】南京-广告算法工程师•【字节急招】深圳-后台开发工程师-Client Infra•【提前批】「松宝写代码」内推字节跳动2022校招研发提前批•【字节急招】多地-前端开发工程师-抖音（北京/深圳/上海/杭州）•【字节急招】多地-前端研发工程师-Data•【字节急招】南京-前端开发工程师—数据可视化•【汇总】值得关注的内推：字节内推「社招，校招及提前批，实习生」•校招内推码：8J5ZSB8

图片

感谢支持

松宝，「松宝写代码」公众号作者，也用saucxs混迹于江湖，watermark-dom包700+ star，曾在ACM校队，在字节做AB实验，担任面试官，出校招编程题，爱好折腾，致力于全栈，喜欢挑战自己。公众号有精选文章，进阶学习，每日一题，实验室，AB实验，字节内推等模块，欢迎关注和咨询，和松宝一起写代码，冲冲冲！

松宝写代码

松宝写代码

作者也用saucxs混迹于江湖，watermark-dom包700+ star，曾在ACM校队，字节高级前端开发工程师，爱好折腾，致力于全栈，喜欢挑战自己。有精选文章，每日一题，实验室，AB实验，字节内推等模块，和松宝一起写代码，冲冲冲！

145篇原创内容

公众号

原网址: 访问
创建于: 2021-08-19 09:42:12
目录: default
标签: 无

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到

请先后发表评论
  • 最新评论
  • 总共0条评论