本节我们学习 Babel 的配置，许多工具都有自己的配置文件，例如ESLint 的配置文件为 .eslintrc，Prettier 的配置文件为 .prettierrc。
Babel 也有配置文件， Babel 的配置文件是 Babel 执行时默认会在当前目录寻找的文件，主要有 .babelrc、.babelrc.js、babel.config.js、package.json 文件。
.babelrc.babelrc 文件前面我们使用过，我们可以在项目根目录下创建一个 .babelrc 文件，然后输入如下内容：
{
"presets": [...],
"plugins": [...]
}
.babelrc.js
.babelrc.js 文件的配置和 .babelrc 的相同，只是文件格式不同，一个是 json 文件，一个是 js 文件。
const presets = [ ... ];
const plugins = [ ... ];
module.exports = { presets, plugins };
还可以调用Node.js 的任何 API，例如基于进程环境进行动态配置：
const presets = [ ... ];
const plugins = [ ... ];
if (process.env["ENV"] === "prod") {
plugins.push(...);
}
module.exports = { presets, plugins };
babel.config.js
在项目根目录下创建一个 babel.config.js 文件，可以通过 module.exports 输出配置项，例如：
module.exports = function (api) {
api.cache(true);
const presets = [ ... ];
const plugins = [ ... ];
return {
presets,
plugins
};
}
.babelrc 文件放置在项目的根目录中时和 babel.config.js 效果一致，我们只需要选择一种创建即可。如果两种类型的配置文件都存在，.babelrc 会覆盖 babel.config.js 的配置。
package.jsonpackage.json 文件我们也不陌生，可以直接通过 npm init 命令来创建。或者我们还可以将 .babelrc 中的配置信息作为 babel 键的值添加到 package.json 文件中，如下所示：
{
"name": "demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"author": "",
"babel": {
"presets": [...],
"plugins": [...]
}
}
当然我们除了将把配置写在上述这几种配置文件中，我们也可以写在构建工具的配置里。对于不同的构建工具，Babel 也提供了相应的配置项，例如 webpack 的 babel-loader 的配置项，其本质和配置文件是一样的。
配置文件中的主要配置项就是 plugins 和 presets 这两个数组，plugins为插件数组，presets 为预设数组。其他的例如 ignore、minified 等我们一般用不到。
更多可以查看链接：https://www.9xkd.com/
最新评论