babel内置模块
| 名称 | 作用 | 备注 |
|---|---|---|
| babel/cli | 允许命令行使用 babel 命令转译文件 | 一般在写插件时使用 |
| babel/polyfill | 为所有 API 增加兼容方法 | 需要在所有代码之前 require，且体积比较大 |
| babel/plugin-transform-runtime | 把帮助类方法从每次使用前定义改为统一 require，精简代码 | --- |
| babel/runtime | helper库 | 需要安装为依赖，而不是开发依赖，node环境使用，web环境不需要 |
| babel/loader | babel插件在webpack项目中的一个入口 | --- |
| babel/core | babel的polyfill库 | --- |
| babel/preset-env | babel预制环境的集合插件，通过配置目标环境，转换标准上的新特性 | 只转新特性，不转api |
| babel/preset-stage-2 | 转换草案stage-2以及stage-3阶段的的新属性 | --- |
babel手写插件
这张图流程还是，源码=》ast=》ast=》目标代码，其中有必要理解ast
ast->Abstract Syntax Tree，也叫抽象语法树，就是对代码进行词法分析之后再进行语法分析弄出来的东西，可以理解为代码执行前的编译过程
想看代码的ast结构可以通过astexplorer.net/站点查看。
了解完ast的含义，可以查看编写babel插件的格式
这是一个插件的基本格式，一个函数，参数是babel，这里我们用到的是types这个属性，所以只把它写出来，然后就是返回一个对象，key是visiter，然后里面又是个对象，但是key是我们熟悉的东西，就是一个babel-types类型，然后是一个箭头函数，函数有两个参数，path表示路径，state表示状态。
visitor字面意思就是访问者，这里也是这个意思，也就是我们要访问哪个类型的节点，这里是个CallExpression，字面意思就是调用表达式，类似于handle()，path参数表示当前节点的位置，包含的主要是当前节点（node）内容以及父节点（parent）内容，state先不管，有了这些我们就可以去修改代码了。
编写foo === bar 转译为 sebmck === dork
foo === bar 的语法结构为
在nodel_modules下面建立babel-plugin-custom2txt文件夹index.js
在babel.config.js中配置该插件
执行npx babel app/arrow.js
这样就初步完成了一个手写插件
