bable源码主流程分析

简单案例

简单的案例开到道进入神秘的bable 分析ast源码的工具 AST Explorer

//用来解析源代码为ast
const parser = require('@babel/parser')
//用来操作ast
const t = require('@babel/types')
//用来遍历ast
const traverse = require('@babel/traverse').default
//用来生产处理后的代码
const generate = require("@babel/generator").default


let code = 'var ab = 123;'

const ast = parser.parse(code);


traverse(ast, {
 Identifier(path) {
        path.node.name = path.node.name.split('').reverse().join('');
      },
      VariableDeclaration(path){
      	path.node.kind="let";
      },
      NumericLiteral(path){
        path.replaceWith(t.arrayExpression([t.stringLiteral("1"),t.booleanLiteral(false),t.nullLiteral(),t.objectExpression([t.objectProperty(t.stringLiteral("name"), t.stringLiteral("123"))])]))
      }
})

const output = generate(ast, {}, code)

命令处理

"scripts": {
        "build": "babel src --copy-files --out-dir lib"
 },

流程如下:

• npm根据node_modules的.bin目录找到babel命令,npm根据babel-cli中package.json文件的bin规定的入口提取

• 执行babel-cli下面的lib/babel/index.js

• 处理输入命令

这一阶段主要规范化用户的参数命令

编译前

• 确定编译目标

编译目标:文件或文件夹

• 确定编译文件相对路径

• 加载bable文件配置

• 获取编译源码

编译中

• 规范文件对象file,使用bable-paser编译为ast,规范配置对象并合并

• 使用bable-travers遍历文件ast对象,并使用bable-type根据配置项处理源代码

• 使用bable-generate生成处理后代码

ps:代码全部按照node-moudel后的源码分析