非常教程

Babel 参考手册

工具 | instruction

babel-generator

安装

npm install --save-dev babel-generator

使用

import {parse} from 'babylon';
import generate from 'babel-generator';

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

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

选项

格式化输出的选项:

选项名

类型

默认值

描述

auxiliaryCommentBefore

string

可选字符串,在输出文件的开始添加块注释

auxiliaryCommentAfter

string

可选字符串,在输出文件的末尾添加块注释

shouldPrintComment

function

opts.comments

如果注释需要包含在输出中,该函数则需接受注释(作为字符串)并返回 true 。 默认情况下,如果 opts.commoents 为 true 或者 opts.minifed 为 false 并且注释中包含 @preserve 或 @license,则包含注释。

retainLines

boolean

false

尝试在输出的代码中使用与源代码相同的行号(有助于保留栈信息跟踪)

retainFunctionParens

boolean

false

保留函数表达式的上下级 (可用于更改引擎解析行为)

comments

boolean

true

输出中是否包含注释

compact

boolean or 'auto'

opts.minified

设置为 true 以避免添加用于格式化的空格

minified

boolean

false

输出是否被压缩

concise

boolean

false

设置为 true 以减少空格 (但效果不如 opts.compact )

quotes

'single' or 'double'

基于 ast.tokens 的自动检测

输出中对引号的类型进行保留

filename

string

在警告信息中使用

flowCommaSeparator

boolean

false

设置为 true 以使用逗号而不是分号作为 Flow 属性的分隔符

jsonCompatibleStrings

boolean

false

设置为 true,使用 "json" 运行 jsesc:正确的将 "\u00A9" 打印为 "©" ;

source maps 的选项:

选项名

类型

默认值

描述

sourceMaps

boolean

false

启用生成 source maps

sourceMapTarget

string

source map 会与生成代码的文件名进行关联

sourceRoot

string

source map 中所有对应 URLs 的 root

sourceFileName

string

源代码(例如, code 参数中的代码)的文件名。只会在 code 为字符串时使用。

多个来源构建 AST

在大多数情况下,Babel 会将输入文件与输出文件进行 1:1 转换。然而,你可能正在处理从多个来源构建的 AST - JS 文件,模板等。如果出现这种情况,并且你还希望 source map 为你提供正确的来源,则需要将一个对象作为 code 参数传递给 generate。其中键应该为源文件名称,值应该为源内容。

这是一个差不多的例子:

import {parse} from 'babylon';
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
});

// 在适当情况下,source map 会指向 a.js 和 b.js 。
Babel

Babel 是一个通用的多用途 JavaScript 编译器,通过 Babel 你可以使用(并创建)下一代的 JavaScript。

Babel 目录

1.工具 | instruction
2.预设 | Presets
3.常规 | basics
4.用法 | usages