版本

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中。

結論

所以文章開始的三個配置最後到達babel.transform的配置有兩種：

第一種，被第一個test匹配(此處使用了oneOf)，同時在 include: paths.appSrc的範圍內，結果就是

1. plugins中包含babel-plugin-named-asset-import；
2. presets中是package.json中的babel欄位的配置。

第二種，主要是上一種include的漏網之魚，被exclude: /@babel(?:\/|\\{1,2})runtime/撿了起來，大多數是node_module中的檔案。

presets中包含babel-preset-react-app/dependencies，主要原因是設定了babelrc和configFile為false，不再查詢其他配置。