一个简单的例子带你了解Bebel工作原理

Babel工作流程介绍

@babel/parsebabelParser.parse(code, [options])

接受我们的源代码, 生产一个AST(抽象语法树)对象, 后续所有的操作都离不开这个AST

@babel/traverse

转换器, 根据生成的AST, 对其进行转换. 最核心的一个方法. 在这里可以修改AST

@babel/types

在进行AST修改时, 需要借助types上的api进行类型判断, 比如判断是否在if条件内, 是否为Function... 进而做出对应的操作

@babel/generator

根据修改后的AST生成新的代码, 前面几步都是在对AST进行操作, 只有generator能生成新的代码

案例一 去掉ts的类型标识并且将const变成var

// index.ts
const a: string = 'a';
console.log(a);

babel代码

// babel.js
var parser = require("@babel/parser");
var { traverse } = require("@babel/core");
var fs = require('fs');
var generator = require('@babel/generator').default;
// 读取文件代码
const code = fs.readFileSync('index.ts', {
    encoding: 'utf-8'
}).toString();
// 创建ast
const ast = parser.parse(code, {
    plugins: [
        "typescript",
    ],
})
// 修改ast
traverse(ast, {
    enter(path) {
        /*
            查找类型为const的节点
            等同于require("@babel/types").isVariableDeclaration(node, options)
        */
        if (path.isVariableDeclaration(path.node, {
            kind: 'const'
        })) {
            // 修改类型
            path.node.kind = 'var';
        }
        /*
            查找类型typescript string类型的节点
        */
        if (path.isTSStringKeyword(path.node)) {
            // 从父级删除该节点
            path.parentPath.remove();
        }
    }
})
// 生产新的代码
const outputCode = generator(ast);
// 将新代码写入文件output.js
fs.writeFileSync('./output.js', newCode.code);

执行node babel.js 在同级目录下就可以看到

案例二 条件编译

懒得写了

总结

没啥总结的多看文档,多写代码