关于babel:Babel-配置文件

本节咱们学习 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.json

package.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/