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