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

2,305 阅读2分钟

原文: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 配置子包相关的配置。子包的配置文件合并到项目范围的配置文件产生一个新的配置文件,然后把这个新的配置文件给子包使用,也就是局部配置覆盖全局配置。