craco react

Craco React是一种用于构建React应用程序的工具。它是基于Create React App的，但是允许你在不“弹出”Create React App脚手架的情况下，通过使用插件和配置自定义Webpack和Babel设置。使用Craco React，你可以更轻松地自定义React应用程序的构建过程。

相关问题

react craco 配置跨域

要在 React 中使用 craco 配置跨域，你需要进行以下步骤：

1. 安装 `http-proxy-middleware` ：

npm install http-proxy-middleware --save

2. 在项目根目录下创建 `setupProxy.js` 文件。

3. 在 `setupProxy.js` 文件中添加以下代码：

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:5000', // 代理接口的域名和端口号
      changeOrigin: true, // 是否跨域
      pathRewrite: {
        '^/api': '', // 重写接口
      },
    })
  );
};

4. 修改 `package.json` 文件中的 `scripts` 命令：

"start": "craco start",

改为：

"start": "craco start --proxy http://localhost:5000", // 跨域请求代理

这样就完成了 React 中使用 craco 配置跨域的操作。

react中craco移动端适配

craco是一个用于自定义create-react-app配置的工具。在React中进行移动端适配，可以使用craco结合postcss-pxtorem插件来实现。首先，安装craco和postcss-pxtorem插件。然后，在项目根目录中创建一个craco.config.js文件，并添加以下配置代码：

const pxtorem = require('postcss-pxtorem');

module.exports = {
  style: {
    postcss: {
      plugins: [
        pxtorem({
          rootValue: 16, // 设计稿宽度 / 10
          propList: ['*'], // 需要转换的属性，*表示所有
          selectorBlackList: [], // 需要忽略的CSS选择器
        }),
      ],
    },
  },
};

在这个配置中，我们使用postcss-pxtorem将像素单位转换为rem单位。其中，rootValue表示设计稿的宽度除以10，propList表示需要转换的属性，selectorBlackList表示需要忽略的CSS选择器。

接下来，你可以在项目的package.json文件中修改scripts字段，添加以下配置：

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

这样，你就可以使用craco来启动、构建和测试你的React应用。