怎么给新手科普Babel：单仓库下配置文件到底怎么加载

原文：www.yuque.com/xiezhongfu/…

在 webpack 中配置 babel-loader 时候，能够传递 options 参数(配置参数)来指定 babel 的配置参数，固然更推荐采用配置文件的方式。
具体参考：babeljs.io/docs/en/opt…

那配置文件怎么加载呢？
CWD (current working directory)做为根目录，默认状况下会在根目录下查找 babel.config.js
还能够在 babel-loader 中配置跟 babel 配置文件相关的配置(默认在工做目录找配置文件)，采用 babel 配置文件来配置 plugin 和 preset 等。
具体参考：babeljs.io/docs/en/con…

目前 babel 有两种配置文件的格式，它们能够并行，也能够独立运行

• 项目范围的配置文件
• 文件相关的配置文件
  • .babelrc / .babelrc.js
  • package.json 中的 babel 字段

咱们以单仓库(monorepo)代码结构为例进行解释说明。着重强调：Babel会把CWD (current working directory)做为根目录。

babel.config.js
packages/
  mod1/
  	.babelrc
    package.json
    src/index.js
  mod2/
  	.babelrc
    package.json
    src/index.js
复制代码

项目范围的配置文件

咱们通常会在项目根目录下执行 npm 脚本(或自定义脚本)运行 webpack，调用 babel-loader 编译代码。这时候 CWD 就是项目的根目录。

• 在 Babel 7 中有根目录的概念，默认值是 CWD。Babel 会自动在项目根目录下查找 babel.config.js
• 可经过 configFile 能够指定自定义的 babel.config.js 加载路径
• 能够经过 rootMode 设定查找 babel.config.js 文件的方式
• babel.config.js 甚至会对 node_modules 下的包起做用。能够经过 exclude 排除
• 能够经过配置禁用项目范围的配置文件

use: [
  loader: 'babel-loader',
    options: {
        configFile: '某个自定义路径'// configFile 配置为 false, 能够禁用项目范围的配置文件
    }
]
复制代码

文件相关的配置文件

在项目范围的 babel.config.js 中设置 babelrcRoots：

babelrcRoots: [
  // Keep the root as a root
  ".",

  // Also consider monorepo packages "root" and load their .babelrc files.
  "./packages/*"
]
复制代码

Babel 会在子包内部从待编译文件的位置开始向上查找 .babelrc 或 .babelrc.js 或 package.json#babel 文件，直到遇到子包的package.json 为止。因此文件相关的配置文件会被限定在每一个子包内部。

在 babel.config.js 设置 "babelrc" 为 false 能够禁用文件相关的配置功能。

总结

在单仓库的代码组织结构中，项目范围的配置文件颇有用。
babel.config.js 能够配置一些各个子包通用的 babel 配置，在各个子包中在用.babelrc 或 .babelrc.js 或 package.json#babel 配置子包相关的配置。子包的配置文件合并到项目范围的配置文件产生一个新的配置文件，而后把这个新的配置文件给子包使用，也就是局部配置覆盖全局配置。