Babel(一)：Babel的配置文件

Babel 是什么？

Babel 是一个工具链，可以用于把 ES6 + 语法编写的代码转换为向后兼容的 JavaScript 语法，以便可以运行在当前和旧版本的浏览器或者其他环境中。

Babel 可以做哪些事呢？

• 语法转换
• 源码转换
• 通过 Polyfill 方式在目标环境中添加缺失的特性，如 core-js
• ......

Babel 的配置文件

配置文件类型

Babel 有两种并行的配置文件格式，可以一起使用，也可以独立使用。

• 项目范围的配置
  • babel.config.json 文件，具有不同的扩展名(.js, .cjs, .mjs)
• 文件相关配置
  • .babelrc.json 文件,，具有不同的扩展名(.babelrc, .js, .cjs, .mjs)
  • package.json 带 'babel' 秘钥的文件

项目范围的配置

Babel 有一个 根目录 的概念，默认是当前的工作目录。Babel 将在此根目录自动搜索 babel.config.json；或者用户可以使用显示的 configFile 值来覆盖默认的配置文件搜索行为。

因为项目范围的配置文件和配置文件的物理位置是分开的，所以对于必须广泛应用的配置来说，它们是理想的，甚至允许插件和预置轻松地应用于 node_module 或符号链接包中的文件，这在 Babel 6.x 中配置是相当难受的。

但是项目范围的配置缺点就是：它依赖于工作目录，如果工作目录不是 monorepo 根目录，那么使用它会更难受。

我们也可以将 configFile 设置为 false

文件相关配置

Babel 通过从正在编译的 filename 开始搜索目录结构 .babelrc.json 来加载文件。它可以运行你为包的子部分单独创建独立的配置。

文件相关的配置也被合并到项目范围的配置值之上，这使得它们可能对待特定的覆盖有用，尽管这也可以通过 overrides 来完成。

使用文件相关配置时需要注意的一些细节：

• 一旦 package.json 找到包含 a 的目录，搜索将停止，因此相对配置仅适用于单个包
• 正在编译的 filename 必须在 babelrcRoots 包内，否则将停止搜索
• .babelrc.json 文件仅适用于它们自己的包内文件
• .babelrc.json 除非自己选择使用 babelrcRoots，否则包中不是 Babel root 的文件将被忽略

根据使用场景来选择什么配置文件

1. 如果你采用的是 monorepo 模式或者需要编译 node_modules：
2. 如果你的配置文件只适用项目的某个部分：

配置函数API

js配置文件可以导出一个函数，该函数将被传递给配置函数API：

module.exports = api => {
    return {}
}

这个 api 对象公开了 Babel 本身从其索引模块公开的所有内容，以及配置文件特定的API，如下：

• api.version:

  • 类型： string
  • 作用： 加载配置文件的 Babel 版本号

• api.cache：
  虽然使用js来配置 Babel 很好，但缺点是它让缓存更加的困难，因为每次编译文件的时候都会重新执行配置函数，这样就会导致 Babel 也需要重新执行配置中引用的任何插件和预置函数。所以 Babel 为了避免这种情况，它希望配置函数的用户可以告诉它如何在配置文件中管理缓存。

  方法	作用
  api.cache.forever()	永久缓存计算出的配置并且不在调用该函数	api.cache.never()	不要缓存这个配置，并且每次都重新执行该功能	api.cache.using(() => process.env.NODE_ENV)	根据 “NODE_ENV” 的值进行缓存。任何时候，using 回调返回一个与预期值不同的值，将在次调用整个配置函数，并将一个新的条目添加到缓存中	api.cache.invalidate(() => process.env.NODE_ENV)	根据 “NODE_ENV” 的值进行缓存。任何时候使用回调函数返回的值不是预期的值，将在次调用整个配置函数，缓存中的所有条目都将被结果给替换	api.cache(true)	和 api.cache.forever() 一样	api.cache(false)	和 api.cache.never() 一样

• api.env(...)：
  由于 NODE_ENV 是一种相当常见的切换行为的方式，Babel 还专门为此设计了 API 函数。这个 API 函数被用作检查 Babel加载的 envName 的快速方法，如果没有设置其他的覆盖环境，它将考虑到 NODE_ENV。

  它有几种形式的不同：

  方法	作用
  api.env()	返回当前 envName 的值	api.env("production")	如果 envName === 'production' 则返回他 true	api.env(["development", "test"])	如果 ["development", "test"].includes(envName) 为true，那么就返回true	api.env(envName => envName.startsWith("test-"))	如果 env 以 "test-" 开头，那么就返回 true

• api.caller(cb):
  这个 API 用于访问传递给 Babel 的调用者数据。由于许多 Babel 实例可能以不同的 caller 值运行在同一进程中，所以这个 API 被设计为自动配置 api.cache，与 api.env 相同。

  demo：

  function isBabelRegister(caller) {
      return !!(caller && caller.name === '@babel/register');
  };
  
  module.exports = api => {
      const isRegister = api.caller(isBabelRegister);
      return {
          //...
      }
  }
  

  caller 可以用做回调函数的第一个参数。

• api.assertVersion(range):
  虽然 api.version() 很有用，但是 有些时候只需要声明你的版本号就好了，如下：

  module.exports = api => {
      api.assertVersion('^7.2');
      return {
         // ...
      }
  }
  

这个是根据自己的理解在加上翻译软件得出来的结果，我自己也正在学习 Babel，要是有什么不对的地方，还请各位大佬指出来，谢谢啦~