React craco 详细使用与介绍（类似 Vue 外抛的 vue.config.js）

一、简介

• craco 官方文档、craco Github。

• craco 是一个用于扩展 Create React App（CRA）的工具，CRA 是一个用于快速搭建 React 应用的脚手架工具。CRA 提供了一个简单的项目结构和配置，使得开发者可以快速开始一个 React 项目的开发。

  然而 CRA 的配置是被隐藏的，开发者无法对其进行自定义和扩展。这就是 craco 出现的原因。craco（Create React App Configuration Override） 允许开发者覆盖和扩展 CRA 的配置，以满足更复杂的项目需求。

  使用 craco，开发者可以在不弹出 CRA 的配置的情况下，修改 webpack 配置、babel 配置、ESLint 配置、devServer配置 等。craco 提供了一种简单的方式来覆盖 CRA 的默认配置，同时保留了 CRA 的简洁性和易用性。

  通过 craco，开发者可以使用自定义的 webpack 插件、babel 插件 和 其他工具，以满足项目的特定需求。例如：可以添加自定义的 webpack loader，配置自定义的 babel preset 或 plugin，或者修改 webpack 的输出路径等。

二、使用

• 安装

$ npm i -D @craco/craco

• 根目录创建 craco.config.js 配置文件，可以理解为 Vue 项目中外抛的 vue.config.js。

      my-app  
      ├── node_modules  
    + ├── craco.config.js  
      └── package.json
  

  配置文件名其他写法支持，如果找到多个配置文件，craco 将使用上面列表中最高的一个：

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

• 如果多个配置文件，也可以通过 package.json 添加字段指定配置文件：

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

  或 scripts 指令中指定配置文件进行编译：

  {  
      "scripts": {  
          "start": "craco start --config config/craco-config-with-custom-name.js"  
      }  
  }
  

• 修改 package.json 文件中 scripts 配置的 react-scripts 替换为 craco，例如：

  "scripts": {
  -   // "start": "react-scripts start",
  -   // "build": "react-scripts build",
  -   // "test": "react-scripts test",
  +   "start": "craco start",
  +   "build": "craco build",
  +   "test": "craco test",
      "eject": "react-scripts eject"
  }
  

• 在 craco.config.js 文件中，可以根据需要修改和扩展 CRA 的配置。以下是一个示例配置文件的基本结构：

  基本可以覆盖正常业务的所有需求配置，更多配置可以查看下 官方文档：

  const path = require('path')
  const lessPlugin = require('craco-less')
  
  module.exports = {
    // 插件配置
    plugins: [
      {
        plugin: lessPlugin,
        options: {
          lessLoaderOptions: {
            lessOptions: {
              // modifyVars: { '@primary-color': '#1DA57A' },
              javascriptEnabled: true
            }
          }
        }
      }
      // ...
    ],
    // 修改 babel 配置
    babel: {
      // plugins: [
      //   ['@babel/plugin-proposal-decorators', { legacy: true }],
      //   [   
      //     'import', 
      //     {
      //       'libraryName': 'antd',
      //       'libraryDirectory': 'es',
      //       'style': 'css' // 设置为 true 即是 less 这里用的是 css
      //     }
      //   ]
      // ]
      // ...
    },
    // 修改 eslint 配置
    eslint: {
      // ...
    },
    // 修改 module 配置
    module: {
      // rules:[// 规则，在写 style.module.scss 的时候发现引入后缀为 .scss 会报错，在这里配置一下即可
      //   {
      //     test: /.scss$/,
      //     loaders: ['style-loader', 'css-loader', 'sass-loader']
      //   }
      // ]
      // ...
    },
    // 跨域配置
    devServer: {
      proxy: {
        '/api': {
          target: 'https://xxx:8080',
          changeOrigin: true,
          pathRewrite: {
            '^/api': ''
          }
        }
      }
      // ...
    },
    // webpack 配置
    webpack: {
      // 配置别名
      alias: {
        // 约定：使用 @ 表示 src 文件所在路径
        '@': path.resolve(__dirname, 'src')
      },
      // webpack 插件
      plugins: {
        add: [ /* ... */],
        remove: [ /* ... */],
      },
      // plugins: [
      //   new ConfigWebpackPlugin(),
      //   ...whenDev(() => [new CircularDependencyPlugin()], []),
      // ],
      // 这里面是 webpack 原始配置，这里追加的配置，将与原始配置合并
      configure: {
        resolve: {
          fallback: {
            'path': false,
            'util': false,
            'url': false,
            'http': false,
            'https': false,
            'stream': false,
            'assert': false,
            'querystring': false,
            'zlib': false
          }
        }
      }
      // ...
    }
  }