react+antd环境配置

安装homebrew：
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
安装脚手架：npm install create-react-app
安装yarn：brew install yarn
创建项目：create-react-app react_item_name
安装路由：yarn add react-router-dom
安装axios：yarn add axios
安装antd：yarn add antd

按需引入antd

1、yarn add react-app-rewired customize-cra

SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

/* package.json */
"scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test",
+   "test": "react-app-rewired test",
}

2、根目录下创建config-overrides.js

module.exports = function override(config, env) {
  // do stuff with the webpack config...
  return config;
};

3、yarn add babel-plugin-import

+ const { override, fixBabelImports } = require('customize-cra');

- module.exports = function override(config, env) {
-   // do stuff with the webpack config...
-   return config;
- };
+ module.exports = override(
+   fixBabelImports('import', {
+     libraryName: 'antd',
+     libraryDirectory: 'es',
+     style: 'css',
+   }),
+ );

这样就可以按需引入antd组件

如：
 // src/App.js
  import React, { Component } from 'react';
+ import { Button } from 'antd';
  import './App.css';

  class App extends Component {
    render() {
      return (
        <div className="App">
          <Button type="primary">Button</Button>
        </div>
      );
    }
  }

  export default App;

但有的时候需要使用less，如修改主题

解决办法如下：

1、yarn add less less-loader

- const { override, fixBabelImports } = require('customize-cra');
+ const { override, fixBabelImports, addLessLoader } = require('customize-cra');

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
-   style: 'css',
+   style: true,
  }),
+ addLessLoader({
+   javascriptEnabled: true,
+   modifyVars: { '@primary-color': '#1DA57A' },
+ }),
);

测试：可以把app.css改成app.less;

　　app.js中的引入app.css改成app.less

扫码关注我们

微信号：SRE实战

拒绝背锅 运筹帷幄