Babel 中文文档
  • 印记中文
  • 文档
  • 配置
  • 试用
  • 视频
  • 博客
  • 赞助
  • 团队
  • GitHub

›工具包

指南

  • 什么是 Babel?
  • 使用指南
  • 配置 Babel
  • 学习 ES2015
  • 升级至 Babel 7

配置参考

  • 配置文件
  • Config Options
  • 预设
  • 插件
  • 插件列表
  • Compiler assumptions

预设

  • @babel/preset-env
  • @babel/preset-react
  • @babel/preset-typescript
  • @babel/preset-flow

杂项

  • 路线图
  • 注意事项
  • 新增特性时间轴
  • FAQ
  • 编辑器

集成包

  • @babel/cli
  • @babel/polyfill
  • @babel/plugin-transform-runtime
  • @babel/register
  • @babel/standalone

工具包

  • @babel/parser
  • @babel/core
  • @babel/generator
  • @babel/code-frame
  • @babel/runtime
  • @babel/template
  • @babel/traverse
  • @babel/types

帮助工具包

  • helper-compilation-targets
  • helper-module-imports
Edit

@babel/generator

Turns an AST into code.

Install

npm install --save-dev @babel/generator

Usage

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

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

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

Note: The symbols like white spaces or new line characters are not preserved in the AST. When Babel generator prints code from the AST, the output format is not guaranteed.

Options

Options for formatting output:

nametypedefaultdescription
auxiliaryCommentAfterstringOptional string to add as a block comment at the end of the output file
auxiliaryCommentBeforestringOptional string to add as a block comment at the start of the output file
commentsbooleantrueShould comments be included in output
compactboolean or 'auto'opts.minifiedSet to true to avoid adding whitespace for formatting
concisebooleanfalseSet to true to reduce whitespace (but not as much as opts.compact)
decoratorsBeforeExportbooleanSet to true to print decorators before export in output.
filenamestringUsed in warning messages
jsescOptionobjectUse jsesc to process literals. jsesc is applied to numbers only if jsescOption.numbers (added in v7.9.0) is present. You can customize jsesc by passing options to it.
jsonCompatibleStringsbooleanfalseSet to true to run jsesc with "json": true to print "\u00A9" vs. "©";
minifiedbooleanfalseShould the output be minified
retainFunctionParensbooleanfalseRetain parens around function expressions (could be used to change engine parsing behavior)
retainLinesbooleanfalseAttempt to use the same line numbers in the output code as in the source code (helps preserve stack traces)
shouldPrintCommentfunctionopts.commentsFunction that takes a comment (as a string) and returns true if the comment should be included in the output. By default, comments are included if opts.comments is true or if opts.minified is false and the comment contains @preserve or @license
topicToken'%' or '#'The token to use with Hack-pipe topic references. This is required when there are any TopicReference nodes.

Options for source maps:

nametypedefaultdescription
sourceMapsbooleanfalseEnable generating source maps
sourceRootstringA root for all relative URLs in the source map
sourceFileNamestringThe filename for the source code (i.e. the code in the code argument). This will only be used if code is a string.

AST from Multiple Sources

In most cases, Babel does a 1:1 transformation of input-file to output-file. However, you may be dealing with AST constructed from multiple sources - JS files, templates, etc. If this is the case, and you want the sourcemaps to reflect the correct sources, you'll need to pass an object to generate as the code parameter. Keys should be the source filenames, and values should be the source content.

Here's an example of what that might look like:

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.
← @babel/core@babel/code-frame →
  • Install
  • Usage
  • Options
  • AST from Multiple Sources
Babel 中文文档
文档
学习 ES2015
社区
视频用户Stack OverflowSlack 频道Twitter
更多
博客GitHub 组织GitHub 仓库Website 仓库旧版网址 6.x旧版网址 5.x