Babel 7 Config 载入顺序-JavaScript中文网-JavaScript教程资源分享门户

Babel 7 是一个非常流行的前端 Javascript 编译器，它可以将当前版本的 ES6+ 语法转换为 ES5 可以运行的语法。Babel 配置文件是使用 babel.config.js 或者 .babelrc 来保存的，但是在实际的项目中，我们会发现 Babel 配置文件加载的顺序不尽相同，这个顺序的改变往往会导致编译结果的不同。本文将详细介绍 Babel 7 配置文件的加载顺序以及其带来的深刻指导意义。

Babel 7 配置文件的载入顺序

在 Babel 7 中，存在以下几个不同的配置文件：

babel.config.js
.babelrc
.babelrc.js
.babelrc.cjs
package.json

它们的载入顺序也不相同，如下所述：

如果你运行命令 babel src --out-dir lib，那么 Babel 将会从当前执行该命令的目录开始向上查找 babel.config.js。
如果找不到 babel.config.js，那么 Babel 将会从当前执行该命令的目录开始向上查找 .babelrc 文件。
如果找到了 .babelrc 文件，那么该文件的配置将被使用来编译代码。
如果没有找到 .babelrc，则 Babel 将查找 .babelrc.js、.babelrc.cjs 文件。如果其中任何一个文件存在，Babel 将执行它们并使用它们的输出结果来编译代码。
如果这个步骤也没有找到 .babelrc.js、.babelrc.cjs 文件，那么 Babel 将会查找项目的 package.json 文件，并且在 package.json 的 babel 属性中寻找编译器的配置。如果存在这个 babel 属性，Babel 将使用它作为编译器的配置。
如果以上所有元素均不存在，那么 Babel 将使用默认配置来编译代码。

Babel 7 带来的深刻指导意义

正确地加载 Babel 配置文件很重要，具体来讲，它有以下几个作用：

配置加载会影响到文件的编译结果，正确的配置文件加载可以让我们得到期望的编译结果。
通过学习 Babel 配置文件的加载顺序，我们可以更好地了解 Babel 的优先级规则，这可以帮助我们构建更加复杂的项目。
如果你所使用的框架依赖于 Babel，那么了解 Babel 配置文件的加载顺序可以帮助你在项目中正确地配置 Babel。

示例代码

我们来看一个基于 ES6 的示例代码，假设他的文件名是 index.js：

const userName = "Jack";

const printHello = (name) => {
  console.log(`Hello, ${name}`);
};

printHello(userName);

接下来我们来分别用 .babelrc 和 package.json 两种配置文件来展示加载顺序的效果。

.babelrc 文件的配置

在项目的根目录下新建 .babelrc 文件，写入如下配置：

{
  "presets": ["@babel/preset-env"]
}

然后在命令行中执行以下代码：

babel index.js --out-file ./build/index.js

以上代码至少会输出以下内容：

"Hello, Jack"

此时我们可以看到，我们的代码已经被成功编译了。

package.json 文件的配置

还是刚刚的代码，我们现在来看如何在 package.json 中来配置 Babel。在项目的 package.json 文件中，添加以下内容：

{
  "name": "my-project",
  "version": "1.0.0",
  "babel": {
    "presets": ["@babel/preset-env"]
  }
}

然后在命令行中执行以下代码：

babel index.js --out-file ./build/index.js

代码至少会输出以下内容：

"Hello, Jack"

同样地，我们的代码已经被成功编译了。

总结

在本文中，我们了解了 Babel 7 配置文件的载入顺序，并且发现它非常重要。正确地承认这种顺序可以帮助我们得到期望的编译结果，这对于构建更加复杂的项目至关重要。因此，在使用 Babel 7 时，我们需要了解其优先级规则并且正确地加载它们的配置文件。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64c9b65a5ad90b6d0417e5e9