使用 Craco 自定义 Create React App 配置文件

在使用 Create React App (CRA) 开发 React 应用时，通常需要自定义一些配置项，比如引入 Less、按需加载 Antd 等。这时候可以使用 react-app-rewired 进行定制化，但随着 React 的升级，其已经不再兼容，Craco 应运而生，能够用于自定义 CRA 的配置。本文将介绍如何使用 Craco 自定义 CRA 配置文件，并以 CSS 为主题进行说明。

前置条件

在开始使用 Craco 之前，需要确保已经创建了 React 应用，如果没有，请参考 Create React App 文档 进行创建。

安装 Craco

安装 Craco 可以使用 npm 或者 yarn，以下以 npm 为例：

npm install @craco/craco --save-dev

配置 Craco

在根目录下新建一个 craco.config.js 文件，并进行如下配置：

module.exports = {
  style: {
    // ...
  },
};

其中 style 是一个对象，用于配置样式的相关配置，比如依赖的 loader、配置项等。

引入 Less

如果需要在项目中编写 Less 样式，可以引入 craco-less 这个 Craco 插件。

首先安装 craco-less：

npm install craco-less --save-dev

然后在 craco.config.js 中进行配置：

const CracoLessPlugin = require('craco-less');

module.exports = {
  plugins: [{ plugin: CracoLessPlugin }],
};

最后在组件中使用 Less：

@import '~antd/dist/antd.less';

.selector {
  background-color: @primary-color;
}

配置生成 Source Map

如果需要在开发环境中查看源代码，可以开启 sourceMap。

module.exports = {
  style: {
    sass: {
      loaderOptions: {
        sourceMap: true,
      },
    },
  },
};

集成 PostCSS

通过 Craco 进行配置，可以集成 PostCSS 以支持后代选择器等新特性。

首先安装 craco-plugin-postcss：

npm install craco-plugin-postcss --save-dev

然后在 craco.config.js 中进行配置：

module.exports = {
  plugins: [
    // ...
    {
      plugin: require('craco-plugin-postcss'),
      options: {
        postcssOptions: {
          plugins: [
            require('postcss-preset-env')({
              autoprefixer: {
                flexbox: 'no-2009',
              },
              stage: 3,
            }),
          ],
        },
      },
    },
  ],
};

按需加载 Antd

如果项目中需要使用 Antd，可以使用 babel-plugin-import 进行按需加载。

首先安装 babel-plugin-import：

npm install babel-plugin-import --save-dev

然后在 craco.config.js 中进行配置：

module.exports = {
  babel: {
    plugins: [
      // ...
      [
        'import',
        {
          libraryName: 'antd',
          libraryDirectory: 'es',
          style: 'css',
        },
      ],
    ],
  },
};

启动应用

以上配置完成后，在 package.json 中修改启动命令：

{
  "scripts": {
    "start": "craco start",
    // ...
  }
}

使用 npm start 启动应用即可。