ant Design和ant Design mobile的使用，并实现按需加载

1.全局安装yarn 

npm install -g create-react-app yarn

 

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

 

3.引入antd/引入antd-mobile

yarn add antd

 

yarn add antd-mobile

 

4.在app.js引入button

pc端

import Button from 'antd/lib/button';

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

 移动端

import Button from 'antd-mobile/lib/button';

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

 

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

pc端

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

 移动端

@import '~antd-mobile/dist/antd-mobile.css';

 

6.按需加载模块

yarn add react-app-rewired@2.0.2-next.0

 

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的代码

pc端

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

 移动端

const { injectBabelPlugin } = require('react-app-rewired');
module.exports = function override(config, env) {
    config = injectBabelPlugin(
             ['import', { libraryName: 'antd-mobile', libraryDirectory: 'es', style: 'css' }],
             config,
           );
    return config;
  };

 

11.修改app.css代码

pc端

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

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

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

 移动端

@import '~antd-mobile/dist/antd-mobile.css';   // 删除

import Button from 'antd-mobile/lib/button';  // 删除

import { Button } from 'antd-mobile'; // 添加

 

12.yarn start重新运行

 

 

按照上面的操作就可以了