如何使用CRACO (Create React App Configuration Override)

如何使用CRACO (Create React App Configuration Override)

cracoCreate React App Configuration Override, an easy and comprehensible configuration layer for Create React App.项目地址:https://gitcode.com/gh_mirrors/cr/craco

本教程将指导你如何安装和使用CRACO，一个用于配置Create React App (CRA) 的工具，无需eject操作。

1. 项目的目录结构及介绍

当你设置好CRACO后，你的项目目录可能会类似于以下结构：

my-react-app/
├── node_modules/                # 项目依赖包
├── public/                      # 公共静态资源目录
│   ├── index.html               # 主页面模板
│   └── favicon.ico              # 标题图标
├── src/                         # 应用源代码
│   ├── App.css                  # CSS样式
│   ├── App.js                   # 主应用组件
│   ├── App.test.js              # 测试文件
│   ├── index.css                # 主入口CSS
│   ├── index.js                 # 应用主入口
│   └── logo.svg                 # 标志图片
├── package.json                 # 项目元数据和依赖
├── craco.config.js              # CRACO配置文件
└── yarn.lock or package-lock.json  # 依赖锁文件

2. 项目的启动文件介绍

在package.json中，你可以找到start脚本，它是用来启动开发服务器的。默认情况下，它会被配置为使用CRACO来替代CRA的脚本：

{
  "name": "my-react-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    // ...
  },
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    // ...
  },
  "devDependencies": {
    "@craco/craco": "^版本号",  // 添加CRACO作为开发依赖
    // ...
  }
}

这里，"start" 脚本运行 craco start，这将启动带有你自定义配置的开发服务器。

3. 项目的配置文件介绍

CRACO的配置文件通常名为 craco.config.js，位于项目根目录下。这个文件允许你定制CRA的默认行为，如修改Webpack配置，添加或替换loader，以及改变Babel的设置等。例如，以下是一个简单的CRACO配置示例：

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

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: { '@primary-color': '#1DA57A' }, // 修改主题色
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
};

在这个例子中，我们引入了CracoLessPlugin插件来配置less编译，并自定义了React应用的主题颜色。

了解了这些基础，现在你可以根据自己的需求，个性化地配置CRA项目，而不必担心丢失官方更新。祝你在CRACO的世界里愉快编码！

cracoCreate React App Configuration Override, an easy and comprehensible configuration layer for Create React App.项目地址:https://gitcode.com/gh_mirrors/cr/craco