@babel/cli与@babel/core的编译过程

构建部分内容

从 node_moduls/@babel/cli/bin/babel.js 开始

读取配置部分

1.尝试加载 babel.config.js、babel.config.cjs、babel.config.mjs 等（这边配置了babel.config.js用于调试），加载完的信息会被存起来

2.加载 package.json 文件，babel 支持在里面配置 presets 和 plugins ，估计是加载完再取出来的

3.尝试加载 .babelrc 等文件

上面几个文件加载完之后，合并配置

加载 plugins 与 presets

1.根据配置，分别遍历 plugins 数组和 presets 数组

调用进去就是对 plugin 每一项的方法的调用

解析部分

1.先读入口文件得到 code

2.根据 config 生成 最后的配置文件

3.进入 @babel/parse 解析生成 ast

• 词法解析
• 语法解析

遍历与转换部分

1.遍历插件数组，得到最后的 visitor 对象

2.开始遍历，对单个节点和数组节点不同的遍历方式，在有 visitor 感兴趣的节点的时候，会调用对应的方法

生成

1.就是遍历ast，根据规则把字符串代码添加到数组里，最后拼接到一起

补充

解析、遍历、生成 3个过程都在这个 run 方法里完成的

总结

在这个过程中发生的事情

• 加载配置文件（babel.config.js、package.json、.babelrc等等等等）
• 根据最后的配置，加载 plugins 和 presets
• utf8格式解析文件，并且将内容解析成 ast
• 生成最后的 visitor 对象 。转换和遍历的过程，遍历到感兴趣的节点调用对应的方法
• 从 ast 生成转换后的代码