Babel深入学习

三思而后行，慎承诺

已于 2022-09-22 06:51:05 修改

阅读量309

点赞数

分类专栏：架构文章标签：学习前端 javascript

于 2022-09-20 15:25:10 首次发布

本文链接：https://blog.csdn.net/weixin_42283818/article/details/126953940

版权

架构专栏收录该内容

9 篇文章 0 订阅

订阅专栏

Babel介绍

babel 最开始叫 6to5，顾名思义是 es6 转 es5，但是后来随着 es 标准的演进，有了 es7、es8 等， 6to5 的名字已经不合适了，所以改名为了 babel，其实babel就是转译器。

Babel作用

将typescript、 tsx 、es6+ 转换浏览器可以识别JavaScript；
babel时一个工具链；
包括 :语法转换、源代码转换、polyfill实现目标缓解缺少的功能等；
微内核架构：@babel/core

Babel的命令行使用

babel本身可以单独作为一个工具，和postcss单独使用，

Babel 编译器的工作流程

解析阶段（Parsing）
转换阶段（Transformation）
生成阶段（Code Generation）

babel 编译过程

npm install @babel/core -D //可以在其他工具中使用
npm  nstall @babel/cli -D //可以单独作为命令行工具使用
npm  install @babel/plugin-transform-arrow-functions -D//babel的插件，处理箭头函数
npm  install @babel/plugin-transform-block-scoping -D//babel的插件，处理块级作用域
npm install @babel/preset-env.  -D //这个插件相当于一系列插件的组合

Babel的AST

babel是个js编译器，写babel插件其实就是操作ast。
我们日常项目中使用ast的场景很多，比如eslint, codemods, css parsers, css in js等等，不同的工具的ast解析规则可能稍有区别，这里以babel的规范为主。

ast的定义如下：
An abstract syntax tree is a tree representation of source code written in a programming language. Each node of the tree denotes a construct occurring in the source code.
ast的处理包括三个步骤， parse, transform, generate，我们关注点在前两步，具体要操作的是第二步。