ant Design（pc端的使用），并实现ant design的按需加载

Posted 2021-02-03 luguankun

1.全局安装yarn 

npm install -g create-react-app yarn

 

2.创建react项目,并用yarn start 运行

 

3.引入antd

yarn add antd

 

4.在app.js引入button

import Button from ‘antd/lib/button‘;

 <div className="App">
        <Button type="primary">Button</Button>
      </div>

 

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

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

 

6.按需加载模块

yarn add [email protected]

 

7.修改package.json，绿色替换红色

/* 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",
}

 

8. 根目录创建 config-overrides.js，添加如下代码

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

 

9.使用 babel-plugin-import

yarn add babel-plugin-import

 

10.用下面代码覆盖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;
  };

 

11.修改app.css代码

@import ‘~antd/dist/antd.css‘;   // 删除

import Button from ‘antd/lib/button‘;  // 删除

import { Button } from ‘antd‘; // 添加

 

按照上面的操作就可以了