babel执行流程

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;
}