npm install --save-dev @babel/generator


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

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

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

Js中文网 – 前端进阶资源教程 ,Babel中文文档


Options for formatting output:

name type default description
auxiliaryCommentBefore string Optional string to add as a block comment at the start of the output file
auxiliaryCommentAfter string Optional string to add as a block comment at the end of the output file
shouldPrintComment function opts.comments Function 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.minifed is false and the comment contains @preserve or @license
retainLines boolean false Attempt to use the same line numbers in the output code as in the source code (helps preserve stack traces)
retainFunctionParens boolean false Retain parens around function expressions (could be used to change engine parsing behavior)
comments boolean true Should comments be included in output
compact boolean or ‘auto’ opts.minified Set to true to avoid adding whitespace for formatting
minified boolean false Should the output be minified
concise boolean false Set to true to reduce whitespace (but not as much as opts.compact)
filename string Used in warning messages
jsonCompatibleStrings boolean false Set to true to run jsesc with "json": true to print "\u00A9" vs. "©";

Js中文网 – 前端进阶资源教程 ,Babel中文文档

Options for source maps:

name type default description
sourceMaps boolean false Enable generating source maps
sourceRoot string A root for all relative URLs in the source map
sourceFileName string The 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.

← corecode-frame →

来源:Js中文网 – 前端进阶资源教程



  1. 关注我们的 GitHub 博客,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号 「IT平头哥联盟」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界