create-react-app中的babel配置探索

刨根發表於2020-07-21

版本

babel-loader version:"8.1.0"

create-react-app:"3.4.1"

三個配置

第一部分：

{
  test: /\.(js|mjs|jsx|ts|tsx)$/,
  include: paths.appSrc,
  loader: require.resolve('babel-loader'),
  options: {
    customize: require.resolve(
      'babel-preset-react-app/webpack-overrides'
    ),
    plugins: [
      [
        require.resolve('babel-plugin-named-asset-import'),
        {
          loaderMap: {
            svg: {
              ReactComponent:
                '@svgr/webpack?-svgo,+titleProp,+ref![path]',
            },
          },
        },
      ]
    ],
    cacheDirectory: true,
    cacheCompression: false,
    compact: isEnvProduction,
  },
},

第二部分

{
  test: /\.(js|mjs)$/,
  exclude: /@babel(?:\/|\\{1,2})runtime/,
  loader: require.resolve('babel-loader'),
  options: {
    babelrc: false,
    configFile: false,
    compact: false,
    presets: [
      [
        require.resolve('babel-preset-react-app/dependencies'),
        { helpers: true },
      ],
    ],
    cacheDirectory: true,
    cacheCompression: false,
    sourceMaps: shouldUseSourceMap,
    inputSourceMap: shouldUseSourceMap,
  },
},

第三部分

"babel": {
  "presets": [
    "react-app"
  ]
}

疑惑

以上三部分是babel處理程式碼的配置來源，那麼babel是怎麼處理這些配置的？

解析

首先,看一下babel-loader中一些選項的含義：

babelrc：如果指定了選項filename,預設值為true，babel將會在專案中搜尋配置檔案；該配置只能在程式中配置，類似babel-loader。

[".babelrc", ".babelrc.js", ".babelrc.cjs", ".babelrc.mjs", ".babelrc.json"],以及package.json中的“babel”欄位  
這幾個都是RelativeConfig

configFile：搜尋指定的檔案,如果沒有就是false。預設會去搜尋path.resolve(opts.root, "babel.config.json"),也可以指定檔案。該配置只能在程式中配置，類似babel-loader。

 ["babel.config.js", "babel.config.cjs", "babel.config.mjs", "babel.config.json"];

如果babelrc與configFile同時指定為false,babel將不會搜尋配置檔案，babel-loader中的選項將成為babel的配置。

在其他特定條件下，babel-loader中的options會和專案中babel配置檔案中的配置相合並，類似於webpack-merge。

configFileChain // babel.config.[json,js,mjs,cjs] 裡面的配置 
fileChain       // .babelrc.[js,cjs,mjs,json]裡面的配置
programmaticChain // babel-loader中的配置
const chain = mergeChain(mergeChain(mergeChain(emptyChain(), configFileChain), fileChain), programmaticChain);
// 經過合併生成最後的配置
// babelrc，configFile 設定為false的時候 configFileChain  fileChain 裡面的內容為空，最後的配置由babel-loader決定。

相關邏輯在node_modules/@babel/core/lib/config/config-chain.js中。