为什么需要？

是什么？

如箭头函数转换成普通的function函数。因为并不是所有浏览器都支持箭头函数，使用babel就可以做兼容适配。

官网：https://babeljs.io/
中文官网：https://www.babeljs.cn/

========================

安装

命令行安装：

npm install @babel/cli @babel/core -D

使用

1、命令

npx babel src --out-dir dist #输出到dist目录
#或
npx babel src --out-file test.js #输出成test.js

光输出是不会进行转换的，想要转换需要对应的插件

2、插件

要安装对应的插件，才会进行转换

箭头函数转换

npm install @babel/plugin-transform-arrow-functions -D

然后项目内运行

npx babel src --out-dir dist --plugins=@babel/plugin-transform-arrow-functions

let const 转成 var

npm install @babel/plugin-transform-block-scoping -D

然后项目内运行

npx babel src --out-dir dist --plugins=@babel/plugin-transform-block-scoping,@babel/plugin-transform-arrow-functions

3、预设

但是如果要转换的内容过多，一个个设置是比较麻烦的，我们可以使用预设（preset）：

npm install @babel/preset-env -D

然后项目内运行

npx babel src --out-dir dist --presets=@babel/preset-env

========================

底层原理

工作流程

1、解析阶段（Parsing）

2、转换阶段（Transformation）

3、生成阶段（Code Generation）

编译器源代码：https://github.com/jamiebuilds/the-super-tiny-compiler

1、词法分析
对语句进行分割，如const name = “abc”，按空格分割开。

2、tokens数组
把分割开的每个词，放到数组里面

3、语法分析
分析关键字，如const、let等
分析运算符，如等号=

4、AST抽象语法树，遍历访问
把分解的结果用树结构表示出来，然后遍历，通过插件进行转换，如把const 转成var

5、新的AST，生成新的抽象语法树
新的树都是转换后的

6、变成目标源代码

========================

webpack中使用

查看 https://www.yuque.com/yejielin/mypn47/whbit4#TUEXI

配置文件