跳至主要内容

入门

创建文件​

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，在其上下文对象中包含了额外的属性。

覆盖模式 ​

某些部分有一个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',
};