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

Myth丶恋晨 2022-04-02 17:40 354阅读 0赞

先来回顾一下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和栅格。效果如下

[react-app-rewired]: https://link.jianshu.com?t=https%3A%2F%2Fgithub.com%2Ftimarney%2Freact-app-rewired
[babel-plugin-import]: https://link.jianshu.com?t=https%3A%2F%2Fgithub.com%2Fant-design%2Fbabel-plugin-import