怎麼給新手科普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 配置子包相關的配置。子包的配置文件合併到項目範圍的配置文件產生一個新的配置文件，而後把這個新的配置文件給子包使用，也就是局部配置覆蓋全局配置。