babel的原理
- 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
- 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';
}
}
}
});
- 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
-
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
- 把文件转为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);
网友评论