为什么需要babel？
事实上，在开发中，我们很少直接去接触babel。但是babel对于前端开发者来说，目前是不可缺少的一部分：比如，我们想要使用ES6+的语法、想要使用TypeScript、开发React项目等，这些都需要借助babel最终转化成JS的
开发React项目，我们需要写jsx语法，这些jsx语法需要通过babel转化成 js 语法
babel到底是什么？
babel是一个工具链（与postcss很像），主要用于旧浏览器或者缓解将ECMAScript 2015+代码转换为向后兼容版本的JS。包括：语法转换、源代码转换、polyfill等
babel、postcss 很像“工具集成的场所” babel和postcss里有很多插件可以实现很多功能
// 用到了箭头函数（ES6的语法），有的浏览器可能无法识别[1,2,3].map(n => n+1);// 需要借助babel转换成普通函数写法，这样，所有浏览器就都可以识别了[1,2,3].map(function(n) {return n + 1;})
babel命令行使用
babel本身可以作为一个独立的工具（和postcss一样），不和webpack等构建工具配置也可以单独使用。
如果我们希望单独使用babel的话，在命令行尝试使用babel。
1）安装
npm i -D @babel/core @babel/cli
- @babel/core：babel的核心代码，必须安装；
- @babel/cli ：可以让我们在命令行中使用babel
如果你在命令行中使用babel的话，我们需要安装@babel/cli（这个的作用就是能让你在命令行中使用babel）； 如果你在webpack中使用babel，不需要在命令行中使用的话，是不需要安装@babel/cli的
2）使用babel
注意！！！必须搭配插件才可产生作用（同postcss使用）（以转换ES6中的箭头函数为例）
① 安装插件
npm i -D @babel/plugin-transform-arrow-functions
② 转换箭头函数
npx babel src —out-dir dist —plugins=@babel/plugin-transform-arrow-functions
补充 - 多个插件的写法（用“，”分开） npx babel src —out-dir dist —plugins=@babel/plugin-transform-arrow-functions,@babel/plugin-transform-block-scoping
babel的preset（预设）
但是如果要转换的内容过多，一个个设置是比较麻烦的（需要安装使用好多插件），我们可以使用预设（preset）
preset相当于一系列插件的组合，它会默认查找所需要的插件。（查找的方法同browerslist）
1）安装 @babel/preset-env
npm i -D @babel/preset-env
2）使用
npx babel src —out-dir dist —presets=@babel/preset-env
babel的底层原理
Q：babel是如何做到将我们的一段代码（ES6、TypeScript、React）转成另外一段代码（ES5）的呢？从一种源代码（原生语言）转换成另一种源代码（目标语言），这是什么的工作呢？
就是编译器，事实上我们可以将babel看成就是一个编译器。Babel编译器的作用就是将我们的源代码，转换成浏览器可以直接识别的另外一段源代码。
babel编译器执行原理
https://github.com/jamiebuilds/the-super-tiny-compiler 用js写的编译器 代码写得也很好 所以有空多去阅读别人的源代码 学习学习！！！
1）babel的执行阶段（简化版）
babel 也拥有编译器的工作流程（主要有以下3个阶段）：
- 解析阶段（Parsing）；
- 转换阶段（Transformation）；
- 代码生成阶段（Code Generation）
ES6源代码 = 解析=》 原AST树 = 转换=》 新AST树 =通过代码生成技术=》ES5代码
当然，这只是一个简化版的编译器工具流程。
2）babel的执行阶段（真正版本）
①原生源代码
词法分析
②tokens数组
babel通过词法分析，将原生源代码生成tokens数组，生成结构如下所示。
语法分析
③ AST（抽象语法树）
babel通过语法分析，将tokens数组转化为 AST ，如下图所示。
遍历、访问、应用插件
④ 转成新的AST
babel遍历AST后进行访问操作，并通过相应的插件转成新的AST，如下图所示。
⑤目标代码
若有收获，就点个赞吧
0 人点赞
