虽然在新建项目的时候经常用到babel，知道是个讲es6转换为es5的工具，但不了解具体的运转流程。然后我就去学了学，这篇文章就是介绍babel的主要方法和用babel实现一个文件中的依赖分析函数（嘿嘿~！我真棒！）

babel简介

Babel是一个JavaScript 编译器，允许开发人员使用最前沿的JavaScript编写代码，然后Babel将其转换为老式的JavaScript，让更多的浏览器能够理解。（来源百度百科）

babel的主要函数有这三个：parse，traverse，generate。

babel的实现原理：

1，parse: 把代码 code 变成 AST

2，traverse: 遍历 AST 进行修改

3，generate: 把 AST 变成代码 code2

即 code --(1)-> ast --(2)-> ast2 --(3)-> code2

AST是什么

抽象语法树（Abstract Syntax Tree，AST）是源代码语法结构的一种抽象表示
它以树状的形式表现编程语言的语法结构，树上的每个节点都表示源代码中的一种结构
每个包含type属性的数据结构，都是一个AST节点；

可以先安装babel的依赖

npm i @babel/parser -S

复制如下代码：

import { parse } from "@babel/parser"

const code = `let a = 'let'; let b = 2`
const ast = parse(code, { sourceType: 'module' })
console.log(ast)

然后运行一下查看ast的结构，运行出来的结构如图

被框住的部分就是解析出来的节点

举个例子

把所有用let 定义的都变成用var定义

import { parse } from "@babel/parser"
import traverse from "@babel/traverse"
import generate from "@babel/generator"

const code = `let a = 'let'; let b = 2`
const ast = parse(code, { sourceType: 'module' })
traverse(ast, {
  enter: item => {
    if(item.node.type === 'VariableDeclaration'){
      if(item.node.kind === 'let'){
        item.node.kind = 'var'
      }
    }
  }
})
const result = generate(ast, {}, code)
console.log(result.code)

震惊！一文带你了解babel、AST！

babel简介

AST是什么

举个例子