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