0
点赞
收藏
分享

微信扫一扫

你了解Babel吗?

跟着Damon写代码 2022-03-21 阅读 70
前端Babel

文章目录

一、Babel 是什么,有什么用

BabelJavaScript 编译器:他能让开发者在开发过程中,直接使用各类方言(如 TS、Flow、JSX)或新的语法特性,而不需要考虑运行环境,因为Babel可以做到按需转换为低版本支持的代码;Babel内部原理是将 JS 代码转换为 AST,对 AST 应用各种插件进行处理,最终输出编译后的 JS 代码。

二、 AST 抽象语法树

三、Babel 编译流程

在这里插入图片描述

  1. 解析阶段:Babel 默认使用 @babel/parser将代码转换为AST。解析一般分为两个阶段:词法分析和语法分析

    • 词法分析:对输入的字符序列做标记化(tokenization)操作。
    • 语法分析:处理标记与标记之间的关系,最终形成一颗完整的 AST 结构。
  2. 转换阶段:Babel 使用 @babel/traverse 提供的方法对 AST 进行深度优先遍历,调用插件对关注节点的处理函数,按需对 AST 节点进行增删改操作。

  3. 生成阶段:Babel默认使用 @babel/generator 将上一阶段处理后的 AST 转换为代码字符串

举报

相关推荐

0 条评论