babel简单执行流程
为了验证方便 这边 使用的命令是 babel src/index.js --out-file lib/index.compiled.js,这样可以定位 babel 中的files.js 相对目录比较简单
执行scripts 中的 build 命令
执行 package.json 中的scripts 命令
<!-- package.json 中的命令 -->
"scripts": {
"build":"babel src/index.js --out-file index.compiled.js"
}
<!-- 或者终端执行 -->
npx babel src/index.js --out-file index.compiled.js
执行流程：
- normalizeFile：主要是通过 @babel/parser解析 源数据 code,通过词法分析、语法分析生成 ast
- transformFile：主要是通过 @babel/traverse 以及插件的 visitors 深度遍历ast 并 转化相应代码
- generateCode：主要是通过 @babel/generator 传入遍历后的ast，生成新的ast 以及 sourceMap
以下是简单代码转化演示 const -> var
const { parse } = require("@babel/parser");
const traverse = require("@babel/traverse");
const generator = require("@babel/generator")
const code ="const a = 'this is a const mark'"
// 词法分析、 语法分析 并返回ast
const parseAst = parse(code,{tokens:true})
console.log("parseAst:",parseAst)
// Babel Traverse（遍历）模块维护了整棵树的状态，并且负责替换、移除和添加节点。
// 官网连接 https://babeljs.io/docs/babel-traverse
traverse.default(parseAst,{VariableDeclaration:{
enter(path){
path.node.kind='var'
}
}})
// @babel/generator 生成ast
const { code:generatorCode } = generator.default(parseAst)
console.log("generatorCode:",generatorCode)
// 打印结果是
var a = 'this is a const mark'
-
详情可以查看：babel手册
-
babel查找并加载preset和plugin
以下是使用插件 转化箭头函数的代码演示
const babel = require("@babel/core");
const { code } = babel.transformSync("let number = x => x", {
plugins: [
"@babel/plugin-transform-arrow-functions",
"@babel/plugin-transform-function-name",
"@babel/plugin-transform-block-scoping"
],
});
// 结果
var number = function number(x) {
return x;
}
