@babel/generator

將 AST 轉換為程式碼。

安裝

npm
Yarn
pnpm

npm install --save-dev @babel/generator

yarn add --dev @babel/generator

pnpm add --save-dev @babel/generator

用法

JavaScript
import { parse } from "@babel/parser";
import generate from "@babel/generator";

const code = "class Example {}";
const ast = parse(code);

const output = generate(
  ast,
  {
    /* options */
  },
  code
);

資訊

空白或換行符號等符號不會保留在 AST 中。當 Babel 產生器從 AST 列印程式碼時，輸出格式並非保證。

選項

歷程

版本	變更
v7.22.0	新增 `importAttributesKeyword`
v7.21.0	新增 `inputSourceMap`

輸出格式化選項

名稱	類型	預設值	說明
auxiliaryCommentAfter	字串		可選擇字串，新增為輸出檔案結尾的區塊註解
auxiliaryCommentBefore	字串		可選擇字串，新增為輸出檔案開頭的區塊註解
comments	布林值	`true`	是否將註解包含在輸出中
compact	布林值或 `'auto'`	`opts.minified`	設為 `true` 以避免新增空白進行格式化
concise	布林值	`false`	設為 `true` 以減少空白（但不如 `opts.compact`）
decoratorsBeforeExport	布林值		設為 `true` 以在輸出中於 `export` 前列印裝飾器。
filename	字串		用於警告訊息
importAttributesKeyword	`"with"`、`"assert"` 或 `"with-legacy"`		要使用的 import 屬性/斷言語法。`"with"` 用於 `import "..." with { type: "json" }`，`"assert"` 用於 `import "..." assert { type: "json" }`，`"with-legacy"` 用於 `import "..." with type: "json"`。未指定時，`@babel/generator` 會根據 AST 形狀嘗試比對輸入程式碼中的樣式。
jsescOption	物件		使用 `jsesc` 來處理字面值。只有在 `jsescOption.numbers`（在 `v7.9.0` 中新增）存在時，才會將 `jsesc` 套用至數字。你可以透過傳遞選項來自訂 `jsesc`。
jsonCompatibleStrings	布林值	`false`	設為 true 以使用「json」來執行 `jsesc`：true 以列印「\u00A9」而非「©」；
minified	布林值	`false`	輸出是否要縮小
retainFunctionParens	布林值	`false`	保留函式運算式周圍的括號（可用於變更引擎剖析行為）
retainLines	布林值	`false`	嘗試在輸出程式碼中使用與原始碼相同的行號（有助於保留堆疊追蹤）
shouldPrintComment	函式	`opts.comments`	函式，用於取得註解（字串形式），並在註解應該包含在輸出中時傳回 `true`。預設情況下，如果 `opts.comments` 為 `true`，或如果 `opts.minified` 為 `false` 且註解包含 `@preserve` 或 `@license`，則會包含註解
recordAndTupleSyntaxType	`'hash'` 或 `'bar'`	`'hash'`	與 recordAndTuple 權杖搭配使用。
topicToken	`'%'` 或 `'#'`		與 Hack-pipe 主題參照搭配使用的權杖。當有任何 `TopicReference` 節點時，這項設定是必要的。

原始碼地圖選項

名稱	類型	預設值	說明
sourceMaps	布林值	`false`	啟用產生原始碼地圖
inputSourceMap	字串或物件		輸入原始碼地圖
sourceRoot	字串		原始碼地圖中所有相對 URL 的根目錄
sourceFileName	字串		原始碼（即 `code` 引數中的程式碼）的檔案名稱。這只會在 `code` 為字串時使用。

來自多個來源的 AST

在多數情況下，Babel 會對輸入檔案進行 1:1 轉換為輸出檔案。但是，您可能會處理從多個來源建構的 AST，例如 JS 檔案、範本等。如果是這種情況，而且您希望原始碼對應表反映正確的來源，您需要將物件傳遞給 generate 作為 code 參數。金鑰應該是來源檔名，而值應該是來源內容。

以下是範例：

JavaScript
import { parse } from "@babel/parser";
import generate from "@babel/generator";

const a = "var a = 1;";
const b = "var b = 2;";
const astA = parse(a, { sourceFilename: "a.js" });
const astB = parse(b, { sourceFilename: "b.js" });
const ast = {
  type: "Program",
  body: [].concat(astA.program.body, astB.program.body),
};

const { code, map } = generate(
  ast,
  { sourceMaps: true },
  {
    "a.js": a,
    "b.js": b,
  }
);

// Sourcemap will point to both a.js and b.js where appropriate.

安裝​

用法​

選項​

來自多個來源的 AST​

安裝

用法

選項

來自多個來源的 AST