babel 核心

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);
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 主要內容 babel工作流 Toolings Plugins Presets Polyfills babel7做的...
    Yard閱讀 7,591評論 0 11
  • 轉自: Babel 入門教程 阮一峰鏈接地址:http://www.ruanyifeng.com/blog/201...
    webllw閱讀 1,242評論 0 0
  • Babel 入門教程 (說明:本文選自我的新書《ES6 標準入門(第二版)》的第一章《ECMAScript 6簡介...
    runner123閱讀 848評論 0 2
  • 作用:將 ES6+ 版本的代碼轉換為 ES5代碼,以便能夠運行在當前環境和舊版瀏覽器環境中。 這就意味著,可以用 ...
    August_____閱讀 534評論 0 1
  • Babel 入門指南 ?:warning: 注意:Babel 可以與很多構建工具(如 Browserify、Gru...
    靜默虛空閱讀 2,559評論 0 4