Babel配置

翻译:https://babeljs.io/docs/en/configuration
Babel可以配置。现在也有很多工具也有相应的配置:ESlint (.eslintrc),Prettier (.prettierrc)。
options列出了所有babel可以操作的API。但是,如果某个option需要用到Javascript,你可能就会需要一个JS的Config Files

你的场景是什么?

  • 你需要编程创建配置文件?
  • 你需要编译node_modules

那就用babel.config.js

  • 你的配置文件只是应用到某一个包上的静态配置文件?

那就用.babelrc

  • 哪个会比较好?

我们推荐你使用babel.config.jsBabel 本身也在使用这个

babel.config.js

在你项目的根目录下创建一个babel.config.js的文件(与package.json同级)。

1
2
3
4
5
6
7
8
9
module.exports = function (api) {
api.cache(true);
const presets = [ ... ];
const plugins = [ ... ];
return {
presets,
plugins
};
}

了解更多配置选项,查看babel.config.js配置文档

.babelrc

在你的项目下,创建.babelrc的文件,内容如下:

1
2
3
4
{
"presets": [...],
"plugins": [...]
}

了解更多配置选项,查看.babelrc配置文档

package.json

另外,你也可以在package.json文件里设置你的.babelrc配置。他表示你的bable配置,来自于package.json文件。如下:

1
2
3
4
5
6
7
8
{
"name": "my-package",
"version": "1.0.0",
"babel": {
"presets": [ ... ],
"plugins": [ ... ],
}
}

.babelrc.js

配置和.babelrc一样,但是可以拿JS表示。如下:

1
2
3
4
const presets = [ ... ];
const plugins = [ ... ];

module.exports = { presets, plugins };

你可以和Nodejs的API联合使用。比如说,可以利用process环境适配动态环境:

1
2
3
4
5
6
const presets = [ ... ];
const plugins = [ ... ];
if (process.env["ENV"] === "prod") {
plugins.push(...);
}
module.exports = { presets, plugins };

利用CLI(@babel/cli)

1
babel --plugins @babel/plugin-transform-arrow-functions script.js

查看更多cli配置,可查看babel-cli

利用API(@babel/core)

1
2
3
require("@babel/core").transform("code", {
plugins: ["@babel/plugin-transform-arrow-functions"]
});

查看更多bable-core的使用方法,可查看babel-core

总结