巧用CRA（create-react-app）脚手架与Craco调教你的React 开发环境

2024-02-13 12:54:20

在React应用开发中，create-react-app（CRA）脚手架是常备工具，它简化了应用初始化和配置。然而，当需要修改编译配置时，我们可能会求助于npm run eject，这是一种不可逆的操作，无法再跟随官方脚步升级项目中的react-scripts。

幸运的是，Craco横空出世，它允许我们自定义React项目的编译配置，无需eject。Craco是一个基于Webpack的工具，可轻松修改编译配置，让我们能够轻松适应不同项目的特殊需求。

使用Craco

使用Craco的第一步是安装它：

npm install craco --save-dev

然后，在项目根目录下创建一个名为craco.config.js的文件，并写入以下内容：

module.exports = {
  // Your Craco configuration goes here
};

接下来，在package.json文件中，将scripts中的"start"和"build"脚本修改为：

{
  "scripts": {
    "start": "craco start",
    "build": "craco build"
  }
}

现在，你就可以在craco.config.js文件中配置各种编译选项了。Craco提供了丰富的配置选项，包括但不限于：

编译模式（development/production）
CSS预处理器
JavaScript转换器（Babel）
图像优化
字体优化
代理服务器配置

配置示例

以下是一个完整的Craco配置示例：

module.exports = {
  // 启用Source Maps，便于调试
  sourceMap: true,

  // 使用Babel转换器，并指定预设
  babel: {
    presets: [
      ['@babel/preset-env', {
        targets: {
          node: 'current'
        }
      }],
      '@babel/preset-react'
    ]
  },

  // 使用CSS预处理器，这里使用Sass
  style: {
    postcss: {
      plugins: [
        require('autoprefixer')
      ]
    },
    sass: {
      loaderOptions: {
        sassOptions: {
          includePaths: ['./src/styles']
        }
      }
    }
  },

  // 使用Webpack Dev Server代理服务器
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    }
  }
};