react的常用配置

antd 的使用，及相关配置

1. 安装依赖

yarn add antd

2. 自定义主题

yarn add @craco/craco

3. 具体配置

// 根目录下新建craco.config.js
const CracoLessPlugin = require('craco-less');
const path = require("path")
const resolve=(dir)=>path.resolve(__dirname,dir)

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: { '@primary-color': '#1DA57A' },    // 修改主题
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
  webpack:{
      alias:{  // 配置别名
        "@":resolve("src"),
        "comp":resolve("src/components"),
        "views":resolve("src/views"),
        "api":resolve("src/api"),
        "utils":resolve("src/utils")
      }
  }
};

4. css按需引入

// 新建 config-overrides.js
// 具体的配置
const { override, fixBabelImports } = require('customize-cra');

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: 'css',
  }),
);

5. package.json 的修改

  "scripts": {
    "dev": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "craco eject"
  },

配置代理

安装依赖

yarn add http-proxy-middleware

在src下新建setupProxy.js

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

module.exports = function (app) {
  app.use(createProxyMiddleware('/ajax', {
    target: 'https://m.maoyan.com',
    secure: false,
    changeOrigin: true,
    // pathRewrite: {
    //   "^/api": "/api"
    // }
  }))
}

生成的build的文件可以直接打开

在package.json中添加
“private”: true,
"homepage": “.”,