createReact

本篇文章主要介绍了react（16）+antd+less+axios 搭建框架时所遇到的问题。可供新手创建项目时参考。

React

1、使用create-react-app 创建一个react应用

• 官网有详细介绍：https://zh-hans.reactjs.org/docs/create-a-new-react-app.html

  yarn create-react-app my-app
  cd my-app
  yarn start

2、将webpack配置进行对外暴露

建议创建好react 项目以后就将配置进行暴露，以免后续造成一些不必要的影响

yarn ejct

• 使用yarn eject 进行配置暴露后
  package.json 文件中也会自动展示一些依赖
  

2、安装antd

• 详见官网：
  https://ant.design/docs/react/use-with-create-react-app-cn

3、安装less

• yarn add less less-loader

• 安装完成后，在config/webpack.config.js 进行less配置
  
  两者均可 第一种相对比较简单， 第二种还需进行如下配置
  
  
  如果使用了antd 在对根目录中的config-overrides.js进行配置时一定要加上下面的配置：

  const { override, fixBabelImports, addLessLoader } = require('customize-cra');
  
  module.exports = override(
    fixBabelImports('import', {
      libraryName: 'antd',
      libraryDirectory: 'es',
      style: 'css',
    }),
    addLessLoader({ // 添加lessloader 如果没有.less文件无法解析
      javascriptEnabled: true,
      modifyVars: {'@primary-color': '#1DA57A'}, // 定义主题色
    }),
  );

4、axios(配置全局环境变量 + 本地跨域反向代理)

• 在根目录下创建 .env.****的文件 本地为 .env.development 并在文件中创建全局环境变量 必须以REACT_APP_开头 如下：
  

在项目的其他文件中可以process.env.REACT_APP_**的形式引用，可根据不同的环境创建不同的文件并对相关值进行配置

• http-proxy-middleware

  yarn add http-proxy-middleware

在根目录下创建一个名为stepProxy.js的文件，并进行如下配置

const proxy = require("http-proxy-middleware");

module.exports = function(app) {
  app.use(proxy("/api", { 
      "target": "" , // 你需要请求的地址 不可为空
      "secure": false,
      "changeOrigin": true,
      ws: true, // proxy websockets
      pathRewrite: {
        '^/api': '/'
      }
  }));
};