babel之转译代码

babel的原理

1. parse：把代码code1变成AST

• AST：用来表示源代码的对象，主要信息在program的Node里面

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'});
console.log(ast);

image.png

2. traverse：遍历AST进行修改

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') {
      // 如果是let声明的，变成var
      if (item.node.kind === 'let') {
        item.node.kind = 'var';
      }
    }
  }
});

3. generate：把AST变成代码code2

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') {
      // 如果是let声明的，变成var
      if (item.node.kind === 'let') {
        item.node.kind = 'var';
      }
    }
  }
});
// 用generate把ast转为代码
const result = generate(ast,{},code)
console.log(result.code);

image.png

4. let,const都能转为es5

import {parse} from '@babel/parser';
import * as babel from '@babel/core';

const code = `let a = 'let';let b = 2; const c = 3`;
const ast = parse(code, {sourceType: 'module'});
const result = babel.transformFromAstSync(ast, code, {
  presets: ['@babel/preset-env']
});
console.log(result.code);

image.png

5. 把文件转为es5代码

import {parse} from '@babel/parser';
import * as babel from '@babel/core';
import * as fs from 'fs';

const code = fs.readFileSync('./test.js').toString();
const ast = parse(code, {sourceType: 'module'});
const result = babel.transformFromAstSync(ast, code, {
  presets: ['@babel/preset-env']
});
fs.writeFileSync('./test.es5.js', result.code);