Babel 配置参考
预设
官方预设
@babel/preset-env用于编译 ES2015+ 语法@babel/preset-typescript用于 TypeScript@babel/preset-react用于 React@babel/preset-flow用于 Flow
使用预设
在 Babel 配置中，如果预设在 npm 上，你可以传入预设的名称，Babel 将检查它是否已经安装在 node_modules 中。 这将添加到 预设 配置选项中，该选项接受一个数组。
json
{
"presets": ["babel-preset-myPreset", "@babel/preset-env"]
}{
"presets": ["babel-preset-myPreset", "@babel/preset-env"]
}除此以外，还可以指定预设的相对或绝对路径。
json
{
"presets": ["./myProject/myPreset"]
}{
"presets": ["./myProject/myPreset"]
}创建预设
要制作你自己的预设，需要导出一个配置对象，需要返回一个插件数组
预设可以包含其它预设和带有选项的插件。
js
module.exports = function () {
return {
plugins: ["Plugin-A", "Plugin-B", "Plugin-C"],
};
};module.exports = function () {
return {
plugins: ["Plugin-A", "Plugin-B", "Plugin-C"],
};
};预设排序
js
plugins: ["Plugin-A", "Plugin-B", "Plugin-C"],plugins: ["Plugin-A", "Plugin-B", "Plugin-C"],排序是倒序的形式，例如上方将按 Plugin-C、Plugin-B 然后再 Plugin-A 运行
插件
通过在 配置文件 中应用插或预设，可以启用 Babel 的代码转换。
使用一个插件
如果插件在 npm 中，你可以传入插件的名字，Babel 会检查它是否安装在 node_modules 中。这将被添加到 plugins 配置项，该选项接受一个数组。
json
{
"plugins": ["babel-plugin-myPlugin", "@babel/plugin-transform-runtime"]
}{
"plugins": ["babel-plugin-myPlugin", "@babel/plugin-transform-runtime"]
}也同样的可以指定插件的相对/绝对路径
json
{
"plugins": ["./node_modules/XXX/babel-plugin-xxPlugin"]
}{
"plugins": ["./node_modules/XXX/babel-plugin-xxPlugin"]
}插件排序
- 插件在预设之前运行
- 插件排序是从第一个到最后一个
插件开发
要开发自己的插件，需要导出一个函数，函数返回一个插件对象
- Github 此仓库将会指导如何创建自己的插件
一个逆转名称的简单插件示例
js
export default function () {
return {
visitor: {
Identifier(path) {
const name = path.node.name;
// 逆转名称：JavaScript -> tpircSavaJ
path.node.name = name.split("").reverse().join("");
},
},
};
}export default function () {
return {
visitor: {
Identifier(path) {
const name = path.node.name;
// 逆转名称：JavaScript -> tpircSavaJ
path.node.name = name.split("").reverse().join("");
},
},
};
}