一、前言

  babel在大家的工作中应该没少用,但是为什么它能将ES6转成ES5呢?一个有态度的前端er肯定会想抛开迷雾,看看其中的奥秘。

  记得很早前自己有去了解过相关方面的内容,但是时间久远,现在已是很模糊了。在此写点笔记回顾一下。

二、运行原理

     抽象语法树(AST)

    抽象语法树(abstract syntax tree或者缩写为AST),或者语法树(syntax tree),是源代码的抽象语法结构的树状表现形式,这里特指编程语言的源代码。 和抽象语法树相对的是具体语法树(concrete syntaxtree),通常称作分析树(parse tree)。 一般的,在源代码的翻译和编译过程中,语法分析器创建出分析树。一旦AST被创建出来,在后续的处理过程中,比如语义分析阶段,会添加一些信息。

  静态分析

     1、静态分析是在不需要执行代码的前提下对代码进行分析的处理过程 (执行代码的同时进行代码分析即是动态分析)。

     2、静态分析的目的是多种多样的, 它可用于语法检查,编译,代码高亮,代码转换,优化,压缩等等场景。

  babel工作分为三大阶段

  1、解析

    将代码字符串解析为抽象语法树;

    将整个代码分割成语法单元,进而再分析语法单元之间的关系;

    这一步会验证语法的正确性,同时由字符串变为对象结构后更有利于精准地分析以及进行代码结构调整。

  2、转换

    遍历抽象树,对抽象语法树进行再变换; 这一步是babel或者其他编译器中最为复杂的过程。

  3、生成

    递归变换后的抽象语法树再生成代码字符串;

三、后话

  上面只是简述babel工作流程,详细每一步的过程可以看后面的参考文章,写得很详细。

  其实也没有特别高程莫测的原理,主要还是写一个语法解释器需要不少的功夫。

参考:

https://zhuanlan.zhihu.com/p/27289600

https://segmentfault.com/a/1190000008390268

  

  

回头再看看babel的实现原理的更多相关文章

  1. cf276E 两棵线段树分别维护dfs序和bfs序,好题回头再做

    搞了一晚上,错了,以后回头再来看 /* 对于每次更新,先处理其儿子方向,再处理其父亲方向 处理父亲方向时无法达到根,那么直接更新 如果能达到根,那么到兄弟链中去更新,使用bfs序 最后,查询结点v的结 ...

  2. 沉淀,再出发:docker的原理浅析

    沉淀,再出发:docker的原理浅析 一.前言 在我们使用docker的时候,很多情况下我们对于一些概念的理解是停留在名称和用法的地步,如果更进一步理解了docker的本质,我们的技术一定会有质的进步 ...

  3. 面试官再问你 HashMap 底层原理,就把这篇文章甩给他看

    前言 HashMap 源码和底层原理在现在面试中是必问的.因此,我们非常有必要搞清楚它的底层实现和思想,才能在面试中对答如流,跟面试官大战三百回合.文章较长,介绍了很多原理性的问题,希望对你有所帮助~ ...

  4. 回头再看N层架构(图解)

    不知不觉来博客园已经快两半了,时间过的真快. 这次的目标是再回顾一下传统的N层架构并且分析一下在DDD中的N层架构. 一.先来看一看传统的N层架构 N-层架构的出现,主要是由于观注点的分离而产生,这三 ...

  5. poj2464扫描线好题,回头再做

    扫描线+区间更新 题解 /* st[i],ol[i]表示y坐标大于y[i]和小于y[i]的点 两颗线段树建立在y轴上,区间[l,r]ol线选在[l,r]时st的分数 每次查询完成后再更新一次 遍历每条 ...

  6. uva12436 回头再做一次

    线段树维护等差数列,结点维护首项+公差即可 #include <cstdio> #include <cstring> #include <algorithm> us ...

  7. hdu4942线段树模拟rotate操作+中序遍历 回头再做

    很有意思的题目,详细题解看这里 https://blog.csdn.net/qian99/article/details/38536559 自己的代码不知道哪里出了点问题 /* rotate操作不会改 ...

  8. PAT 甲级 1009 Product of Polynomials (25)(25 分)(坑比较多,a可能很大,a也有可能是负数,回头再看看)

    1009 Product of Polynomials (25)(25 分) This time, you are supposed to find A*B where A and B are two ...

  9. Babel运行原理

    前言     之前翻博客园的时候,看到有人朋友分享阿里巴巴的面试题,其中有一道题就是关于ES6转ES5 原理的,当时我看到感觉到自己离去阿里巴巴的路还很远啊,像我们大部分做开发的时候,都只知其然不知 ...

随机推荐

  1. hdu 5091 给定矩形覆盖尽量多点 扫描线+线段树

    http://acm.hdu.edu.cn/showproblem.php?pid=5091 给你10000以内的敌舰的坐标(即分别为x,y),要求用W*H的矩形去围住一个区域,使得这个区域内的敌舰最 ...

  2. Scala_类

    类 简单类 最简单的类的定义形式是: class Test1 {  //这里定义类的字段和方法} 可以使用new关键字来生成对象 var test = new Test1() 给类增加字段和方法 Un ...

  3. spring中的两个数据库事务DataSourceTransactionManager 和 JtaTransactionManager区别

    在spring与数据框架(mybatis或hibernate)容器的配置文件中通常会有 <!-- (事务管理)transaction manager, use JtaTransactionMan ...

  4. Python自动化开发 - 字符串, 列表, 元组, 字典和和文件操作

    一.字符串 特性:字符串本身不可修改,除非字符串变量重新赋值.Python3中所有字符串都是Unicode字符串,支持中文. >>> name  = "Jonathan&q ...

  5. JS文件中的中文在网页引用时显示乱码的简单解决方式

    今天把一个jquery方法从前台cshtml文件转移到单独的js文件中后执行不成功,调试发现if判断中的中文字符串变成了乱码,之前在前台文件中是可以正常显示的,所以判定可能是跟文件的编码方式有关系. ...

  6. UWP开发---抓包分析

    一,使用工具 ①Fiddler 摘自百度百科Fiddler简介: Fiddler是一个http协议调试代理工具,它能够记录并检查所有你的电脑和互联网之间的http通讯,设置断点,查看所有的“进出”Fi ...

  7. 【mock】后端不来过夜半,闲敲mock落灯花 (mockjs+Vuex+Vue实战)

      mock的由来[假]   赵师秀:南宋时期的一位前端工程师 诗词背景:在一个梅雨纷纷的夜晚,正处于项目编码阶段,书童却带来消息:写后端的李秀才在几个时辰前就赶往临安度假去了,!此时手头仅有一个简单 ...

  8. 常用Yum镜像源

    163网易的yum源 wget http://mirrors.163.com/.help/CentOS6-Base-163.repo sohu的yum源 wget http://mirrors.soh ...

  9. cad.net之ACAD和GCAD环境变量获取

    #if AC2006 || AC2007 || AC2008 || AC2009 || AC2010 || AC2011 || AC2012 [System.Security.SuppressUnma ...

  10. python之ETL数据清洗案例源代码

    #python语言 import pandas as pd import time data = pd.read_excel('ETL_数据清洗挑战.xlsx','测试数据',dtype=str)#读 ...