关于babel:Babel-配置文件

45次阅读

共计 1365 个字符,预计需要花费 4 分钟才能阅读完成。

本节咱们学习 Babel 的配置,许多工具都有本人的配置文件,例如 ESLint 的配置文件为 .eslintrcPrettier 的配置文件为 .prettierrc

Babel 也有配置文件,Babel 的配置文件是 Babel 执行时默认会在当前目录寻找的文件,次要有 .babelrc.babelrc.jsbabel.config.jspackage.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 也提供了相应的配置项,例如 webpackbabel-loader 的配置项,其本质和配置文件是一样的。

配置文件中的次要配置项就是 pluginspresets 这两个数组,plugins 为插件数组,presets 为预设数组。其余的例如 ignoreminified 等咱们个别用不到。

更多能够查看链接:https://www.9xkd.com/

正文完
 0