跳到主要內容

開始

建立檔案​

可透過下列檔案名稱設定 CRACO

  1. craco.config.ts
  2. craco.config.js
  3. craco.config.cjs
  4. .cracorc.ts
  5. .cracorc.js
  6. .cracorc

若有多個設定檔，CRACO 會使用以上清單中優先順序最高的設定檔。您也可以[在 package.json 檔案中指定檔案路徑]，此檔案的優先順序會高於以上所有檔案清單。

設定自訂位置​

您可以透過在 package.json 檔案中指定 cracoConfig 值，來變更設定檔的位置。

package.json
{
  "cracoConfig": "config/craco-config-with-custom-name.js"
}

選項 2：CLI（向後相容性）​

您可以透過 --config CLI 選項指定檔案路徑，來變更設定檔的位置。

package.json
{
  "scripts": {
    "start": "craco start --config config/craco-config-with-custom-name.js"
  }
}
注意

此 CLI 選項不支援 Jest 與 Babel。

設定建議​

物件文字和函式​

CRACO 設定中許多設定覆寫屬性，可指定下列兩種方式之一

  • 物件文字，將會併入原始設定

    craco.config.js（範例）
    module.exports = {
      webpack: {
        configure: {
          entry: './path/to/my/entry/file.js',
        },
      },
    };

  • 函式，採用原始設定作為第一個參數（還有另外 脈絡物件），並傳回新設定

    craco.config.js（範例）
    module.exports = {
      webpack: {
        configure: (webpackConfig, { env, paths }) => {
          webpackConfig.entry = './path/to/my/entry/file.js';
          return webpackConfig;
        },
      },
    };

此文件中的設定大要將展示這兩個選項，採用同一個名稱的兩個屬性（例如兩個名為 configure 的屬性，一個是物件文字，另一個是函式）。

脈絡物件 ({ env, paths })​

設定覆寫屬性的函式版本接受第二個參數，此為單一物件，包含下列屬性

  • env - 目前的 NODE_ENV（開發、製作等）
  • paths - 包含 CRA 所使用所有路徑的物件

一些組態章節，例如 jest.configure 和 devServer，會在它們的 context 物件中包含額外的屬性。

覆寫模式​

某些章節有一個 mode 屬性，可以指定兩個值中的其中一個

  • extends - 提供的組態會延伸 CRA 設定（預設）
  • file - CRA 設定會重設，你必須提供此外掛程式一個會取代任何設定的官方組態檔

組態輔助器​

when​

craco.config.js（範例）
module.exports = {
  eslint: {
    mode: 'file',
    configure: {
      formatter: when(
        process.env.NODE_ENV === 'CI',
        require('eslint-formatter-vso')
      ),
    },
  },
  webpack: {
    plugins: [
      new ConfigWebpackPlugin(),
      ...whenDev(() => [new CircularDependencyPlugin()], []),
    ],
  },
};

when(condition, fn, [unmetValue])​

when<T>(condition: boolean, fn: () => T, unmetValue?: T): T | undefined

如果 condition 評估為 true，fn 會被呼叫，並且輔助器將會回傳此函式所回傳的結果。如果為 false，unmetValue 將會被回傳（如果未提供，則為 undefined）。

whenDev(fn, [unmetValue])​

whenDev<T>(fn: () => T, unmetValue?: T): T | undefined

等同於 when(process.env.NODE_ENV === 'development', fn, unmetValue)。

whenProd(fn, [unmetValue])​

whenProd<T>(fn: () => T, unmetValue?: T): T | undefined

等同於 when(process.env.NODE_ENV === 'production', fn, unmetValue)。

whenTest(fn, [unmetValue])​

whenTest<T>(fn: () => T, unmetValue?: T): T | undefined

等同於 when(process.env.NODE_ENV === 'test', fn, unmetValue)。

輸出你的組態​

你可以透過各種方式輸出你的組態。

提示

此函式選項會使用包含目前環境變數的物件（例如 NODE_ENV）來呼叫。

物件字面量​

craco.config.js
module.exports = {
  ...
};

函式​

craco.config.js
module.exports = function ({ env }) {
  return {
    ...
  };
};

Promise 或非同步函式​

craco.config.js
module.exports = async function ({ env }) {
  await ...;

  return {
    ...
  };
};

使用自訂 react-scripts 套件​

如果你使用 Create React App 的 react-scripts 套件分叉，你可以於你的組態中指定其名稱，這樣 CRACO 才會知道腳本在何處。如果省略此屬性，CRACO 會預設使用 react-scripts。

craco.config.js
module.exports = {
  // ...
  reactScriptsVersion: 'custom-react-scripts-package',
};