全局安装react脚手架

npm install -g create-react-app

初始化创建react项目

create-react-app my-app

安装antd

yarn add antd

修改 src/App.css，在文件顶部引入 antd/dist/antd.css

@import '~antd/dist/antd.css';

安装react-router-dom

yarn add react-router-dom

安装axios

yarn add axios

安装反向代理 http-proxy-middleware

yarn add http-proxy-middleware

在src文件下创建setupProxy.js文件

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

module.exports = function (app) {
  app.use(
    "/ajax",
    createProxyMiddleware({
      target: "https://m.maoyan.com",
      changeOrigin: true
    })
  );
};

在App.js里测试axios和反向代理,测试前需要重启项目

import React from "react";
import axios from "axios";
function App(props) {
  axios
    .get(
      "ajax/movieOnInfoList?token=&optimus_uuid=A0DA9810FC4711EB8EB57F2D71C8720EF63AA4FEDA4E49F587C017827E2EDCCD&optimus_risk_level=71&optimus_code=10"
    )
    .then(res => {
      console.log("debug log --> ", res);
    });
  return <div>App</div>;
}

export default App;

安装sass-loader和node-sass依赖

yarn add sass-loader node-sass --dev

全局配置scss变量/函数

yarn add sass-resources-loader --dev

一、在暴露配置文件情况下配置

这里的话如果开启npm run eject，暴露配置文件的话，可以在scss的loader里进行添加。

{
    test: /.scss$/,
    use: [{
            loader: 'style-loader'
        }, {
            loader: 'css-loader'
        }, {
            loader: 'sass-loader'
        },
        {
            loader: 'sass-resources-loader',
            options: {
                resources: [
                    // resolve方法第二个参数为scss配置文件地址，如果有多个，就进行依次添加即可
                    path.resolve(__dirname, './../src/assets/scss/output.scss')
                ]
            }
        }
    ]
}

虽然暴露配置文件的做法可以根据自己的需要添加更多元化的配置，但是因为该操作是不可逆的，主要原因有以下几点：

• 无法体验create-react-app更新后带来的功能。 因为你配置是自定义的，就算更新后也不会覆盖eject后的配置。
• 增加代码维护的成本。 create-react-app本意就是为了让用户专注开发而忽略配置，在eject之后，会多出很多配置文件，并且会发现在package.json里加了很多依赖，对于有代码洁癖或者新人同学显得不友好。

二、在不暴露配置文件情况下配置（推荐）

在项目根目录，也就是和package.json同级创建config-overrides.js文件，该文件配置代码如下：

const { override, adjustStyleLoaders } = require("customize-cra");
module.exports = override(
  // ...其他配置...
  adjustStyleLoaders(rule => {
    if (rule.test.toString().includes("scss")) {
      rule.use.push({
        loader: require.resolve("sass-resources-loader"),
        options: {
          resources: "./src/assets/scss/output.scss" //这里是你自己放公共scss变量的路径
        }
      });
    }
  })
);

---

更新于2021/08/19

未更新完，持续更新中...