babel 编译核心
var babel = require('babel-core');
import { transform } from 'babel-core';
import & as babel from 'babel-core';
1、babel.transform(code: string, options? :Object)
在code上传入转换的代码，返回一个对象包含生产的代码，sourcemap 及 ast
babel.transform(code, options) // => {code, map, ast}
输入
const babel = require("babel-core");
const result = babel.transform(
`
import React from "react";
import ReactDOM from "react-dom";
ReactDOM.render(
<h3>React Jsx Transform Without Webpack</h3>,
document.getElementById("root")
);
`,
{
presets: ["react"],
}
);
console.log(result);
输出
{
metadata: {
usedHelpers: [],
marked: [],
modules: { imports: [Array], exports: [Object] }
},
options: {
filename: 'unknown',
filenameRelative: 'unknown',
inputSourceMap: undefined,
env: { development: [Object] },
mode: undefined,
retainLines: false,
highlightCode: true,
suppressDeprecationMessages: false,
presets: [],
plugins: [ [Array], [Array], [Array], [Array] ],
ignore: [],
only: undefined,
code: true,
metadata: true,
ast: true,
extends: undefined,
comments: true,
shouldPrintComment: undefined,
wrapPluginVisitorMethod: undefined,
compact: 'auto',
minified: false,
sourceMap: undefined,
sourceMaps: undefined,
sourceMapTarget: 'unknown',
sourceFileName: 'unknown',
sourceRoot: undefined,
babelrc: true,
sourceType: 'module',
auxiliaryCommentBefore: undefined,
auxiliaryCommentAfter: undefined,
resolveModuleSource: undefined,
getModuleId: undefined,
moduleRoot: undefined,
moduleIds: false,
moduleId: undefined,
passPerPreset: false,
parserOpts: false,
generatorOpts: false,
basename: 'unknown'
},
ignored: false,
code: '\n' +
'import React from "react";\n' +
'import ReactDOM from "react-dom";\n' +
'\n' +
'ReactDOM.render(React.createElement(\n' +
' "h3",\n' +
' null,\n' +
' "React Jsx Transform Without Webpack"\n' +
'), document.getElementById("root"));',
ast: Node {
type: 'File',
start: 0,
end: 177,
loc: SourceLocation { start: [Position], end: [Position] },
program: Node {
type: 'Program',
start: 0,
end: 177,
loc: [SourceLocation],
sourceType: 'module',
body: [Array],
directives: []
},
comments: [],
tokens: [
[Token], [Token], [Token], [Token],
[Token], [Token], [Token], [Token],
[Token], [Token], [Token], [Token],
[Token], [Token], [Token], [Token],
[Token], [Token], [Token], [Token],
[Token], [Token], [Token], [Token],
[Token], [Token], [Token], [Token],
[Token], [Token], [Token], [Token]
]
},
map: null
}
2、babel.transformFile(filename: string, options?: Object, callback:Function)
异步方式转换一整个文件
输入
const fileResult = babel.transformFile(
"./index.jsx",
{
presets: ["react"],
},
function (err, result) {
console.log(err, result);
}
);
console.log("fileResult", fileResult);
输出
null {
metadata: {
usedHelpers: [],
marked: [],
modules: { imports: [Array], exports: [Object] }
},
options: {
filename: './index.jsx',
filenameRelative: './index.jsx',
inputSourceMap: undefined,
env: { development: [Object] },
mode: undefined,
retainLines: false,
highlightCode: true,
suppressDeprecationMessages: false,
presets: [],
plugins: [
[Array], [Array],
[Array], [Array],
[Array], [Array],
[Array], [Array]
],
ignore: [],
only: undefined,
code: true,
metadata: true,
ast: true,
extends: undefined,
comments: true,
shouldPrintComment: undefined,
wrapPluginVisitorMethod: undefined,
compact: 'auto',
minified: false,
sourceMap: undefined,
sourceMaps: undefined,
sourceMapTarget: 'index.jsx',
sourceFileName: 'index.jsx',
sourceRoot: undefined,
babelrc: true,
sourceType: 'module',
auxiliaryCommentBefore: undefined,
auxiliaryCommentAfter: undefined,
resolveModuleSource: undefined,
getModuleId: undefined,
moduleRoot: undefined,
moduleIds: false,
moduleId: undefined,
passPerPreset: false,
parserOpts: false,
generatorOpts: false,
basename: 'index'
},
ignored: false,
code: 'import React from "react";\n' +
'import ReactDOM from "react-dom";\n' +
'\n' +
'ReactDOM.render(React.createElement(\n' +
' "h3",\n' +
' null,\n' +
' "React Jsx Transform Without Webpack"\n' +
'), document.getElementById("root"));',
ast: Node {
type: 'File',
start: 0,
end: 164,
loc: SourceLocation { start: [Position], end: [Position] },
program: Node {
type: 'Program',
start: 0,
end: 164,
loc: [SourceLocation],
sourceType: 'module',
body: [Array],
directives: []
},
comments: [],
tokens: [
[Token], [Token], [Token], [Token],
[Token], [Token], [Token], [Token],
[Token], [Token], [Token], [Token],
[Token], [Token], [Token], [Token],
[Token], [Token], [Token], [Token],
[Token], [Token], [Token], [Token],
[Token], [Token], [Token], [Token],
[Token], [Token], [Token], [Token]
]
},
map: null
}
3、babel.transformFileSync(filename: string, opitons?: Object)
同步方式转换一整个文件
const astResult = babel.transformFromAst("./index.jsx", {
presets: ["react"],
});
4、babel.transformFromAst(ast: Object, code?: string, options?: Object)
给出一个AST，转换它
const originCode = "function getName() {}";
console.log("originCode", originCode);
const originAst = babylon.parse(originCode, {
allowReturnOutsideFunction: true,
});
console.log("originAst", originAst);
const { code, map, ast } = babel.transformFromAst(originAst, originCode);
console.log("code", code);
console.log("map", map);
console.log("ast", ast);
babylon 网站工具转换的AST
{
"type": "Program",
"start": 0,
"end": 16,
"body": [
{
"type": "IfStatement",
"start": 0,
"end": 16,
"test": {
"type": "Literal",
"start": 3,
"end": 7,
"value": true,
"raw": "true"
},
"consequent": {
"type": "ReturnStatement",
"start": 9,
"end": 16,
"argument": null
},
"alternate": null
}
],
"sourceType": "module"
}
const originAst = babylon.parse(originCode, {
allowReturnOutsideFunction: true,
});
originAst结果
Node {
type: 'File',
start: 0,
end: 16,
loc: SourceLocation {
start: Position { line: 1, column: 0 },
end: Position { line: 1, column: 16 }
},
program: Node {
type: 'Program',
start: 0,
end: 16,
loc: SourceLocation { start: [Position], end: [Position] },
sourceType: 'script',
body: [ [Node] ],
directives: []
},
comments: [],
tokens: [
Token {
type: [KeywordTokenType],
value: 'if',
start: 0,
end: 2,
loc: [SourceLocation]
},
Token {
type: [TokenType],
value: undefined,
start: 2,
end: 3,
loc: [SourceLocation]
},
Token {
type: [KeywordTokenType],
value: 'true',
start: 3,
end: 7,
loc: [SourceLocation]
},
Token {
type: [TokenType],
value: undefined,
start: 7,
end: 8,
loc: [SourceLocation]
},
Token {
type: [KeywordTokenType],
value: 'return',
start: 9,
end: 15,
loc: [SourceLocation]
},
Token {
type: [TokenType],
value: undefined,
start: 15,
end: 16,
loc: [SourceLocation]
},
Token {
type: [TokenType],
value: undefined,
start: 16,
end: 16,
loc: [SourceLocation]
}
]
}
const { code, map, ast } = babel.transformFromAst(originAst, originCode);
// code
if (true) return;
// map
null
// ast
Node {
type: 'File',
start: 0,
end: 16,
loc: SourceLocation {
start: Position { line: 1, column: 0 },
end: Position { line: 1, column: 16 }
},
program: Node {
type: 'Program',
start: 0,
end: 16,
loc: SourceLocation { start: [Position], end: [Position] },
sourceType: 'script',
body: [ [Node] ],
directives: []
},
comments: [],
tokens: [
Token {
type: [KeywordTokenType],
value: 'if',
start: 0,
end: 2,
loc: [SourceLocation]
},
Token {
type: [TokenType],
value: undefined,
start: 2,
end: 3,
loc: [SourceLocation]
},
Token {
type: [KeywordTokenType],
value: 'true',
start: 3,
end: 7,
loc: [SourceLocation]
},
Token {
type: [TokenType],
value: undefined,
start: 7,
end: 8,
loc: [SourceLocation]
},
Token {
type: [KeywordTokenType],
value: 'return',
start: 9,
end: 15,
loc: [SourceLocation]
},
Token {
type: [TokenType],
value: undefined,
start: 15,
end: 16,
loc: [SourceLocation]
},
Token {
type: [TokenType],
value: undefined,
start: 16,
end: 16,
loc: [SourceLocation]
}
]
}
