1.babel/core
const babel = require('@babel/core');
const code = "class glass {get name() { return '水杯' }}";
const options = {
presets: ['@babel/preset-env'],
}
// const result1 = babel.transform(code, options);
// babel.transformAsync(code, options).then(res => console.log(res));
// console.log(result);
// const content = babel.transformFileSync('./babel-file.js');
// console.log(content);
// const parsedAst = babel.parse(code, { parserOpts: { allowReturnOutsideFunction: true } });
// console.log(parsedAst);
// const result3 = babel.transformFromAst(parsedAst, code, options);
// console.log(result3);
const config = babel.loadPartialConfig(options); // 提前生成config
const result = babel.transform(code, config.options);
console.log(result);
babel/core的作用 = babel/parser(詞法分析+語法分析 = AST) + babel/traverse (AST 經過plugin轉化) + babel/generator (AST 生成code字符串)
2.babel/parser 實際就是babel內置的parser
babelParser.parse(code, options) 等價于babel.parse(code, options); 會return一個AST樹
const babel = require('@babel/core');
const code = "class glass {get name() { return '水杯' }}";
const options = {
presets: ['@babel/preset-env'],
}
const parsedAst = babel.parse(code);
console.log(parsedAst);
import { parse } from '@babel/parser';
const ast = parse(code);
console.log(ast);
可以看到兩個的輸出ast是一樣的值
3.babel/generator是讀取ast,并將它轉化成代碼以及source map.
import { parse } from '@babel/parser';
import generate from '@babel/generator';
const ast = parse(code);
const output = generate(ast, {minified: true}, code);
console.log(output);
注意generater的作用僅僅是進行轉化成代碼,不會進行處理,與babel/core一節的transformFromAst不同,transformFromAst是會經過plugin的處理的,實質上是babel/traverse + generater的結合.
總結,實際上,通過babel/core的實現也可以看到,babel/core的依賴就是babel/parser + babel/traverse + babel/generator。當然,還有接下來要介紹的一些工具包
// babel/core的依賴
"@babel/code-frame": "^7.8.3",
"@babel/generator": "^7.9.0",
"@babel/helper-module-transforms": "^7.9.0",
"@babel/helpers": "^7.9.0",
"@babel/parser": "^7.9.0",
"@babel/template": "^7.8.6",
"@babel/traverse": "^7.9.0",
"@babel/types": "^7.9.0",
"convert-source-map": "^1.7.0",
"debug": "^4.1.0",
"gensync": "^1.0.0-beta.1",
"json5": "^2.1.2",
"lodash": "^4.17.13",
4.babel/code-frame生成錯誤源碼以及錯誤的位置信息
可以看到babel/core babel/parser babel/traverse babel/generater等包都使用了這個包,console出錯誤信息,提示用戶
例如:
import { codeFrameColumns } from '@babel/code-frame';
const rawLines = `class Foo {
constructor()
}`;
const location = { start: { line: 2, column: 16 } };
const result = codeFrameColumns(rawLines, location, { /* options */ });
console.log(result);