create-react-app中按需引入Ant-Design

先来回顾一下create-react-app脚手架创建项目的方法

//安装create-react-app脚手架
npm i create-react-app -g
//创建项目
create-react-app antd-demo
//启动项目
npm start

安装Ant-Design

npm i antd -S

按需引入Ant-Design插件

这里需要用到两个插件
一、
react-app-rewired（一个对 create-react-app 进行自定义配置的社区解决方案）。

npm i react-app-rewired -D

然后更改一下package.json,这里有个坑，我们用create-react-app安装出来的package.json并不是都是使用react-scripts start这种方式，还有node scripts/start.js这种方式的，在第二种方式下这种更改就会出现问题，目前我还没有想到解决的方法，目前建议就是多试几次，尴尬😅。

/* 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 --env=jsdom",
+   "test": "react-app-rewired test --env=jsdom",
}

然后在项目根目录创建一个 config-overrides.js 用于修改默认配置。

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

二、
babel-plugin-import （一个用于按需加载组件代码和样式的 babel 插件）。

npm i babel-plugin-import -D

修改 config-overrides.js 文件。

const { injectBabelPlugin } = require('react-app-rewired');

  module.exports = function override(config, env) {
   config = injectBabelPlugin(['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }], config);
    return config;
  };

经过上面两部的操作，我们的antd的按需引入就设置好了。

在组件中使用时，方法如下

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
//如下方式进行引入，这样就会按需引入所需的js和css了
import { Button, Icon, Row, Col } from 'antd';
import './index.css';
import registerServiceWorker from './registerServiceWorker';

class App extends Component {
    render() {
        return (
            <div className="App">
                button<Button type="primary">Button</Button><br />
                icon<Icon type="link" /><br />
                <div className="grid">
                    <Row className="row">
                        <Col className="col" span={12}>col-12</Col>
                        <Col className="col" span={12}>col-12</Col>
                    </Row>
                    <Row className="row">
                        <Col className="col" span={8}>col-8</Col>
                        <Col className="col" span={8}>col-8</Col>
                        <Col className="col" span={8}>col-8</Col>
                    </Row>
                    <Row className="row">
                        <Col className="col" span={6}>col-6</Col>
                        <Col className="col" span={6}>col-6</Col>
                        <Col className="col" span={6}>col-6</Col>
                        <Col className="col" span={6}>col-6</Col>
                    </Row>
                </div>
            </div>
        );
    }
}

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

上面引用了antd的三个组件，按钮、icon和栅格。效果如下