react项目中按需加载 ant design

2020-03-12 310 阅读1分钟

一、安装babel插件：`babel-plugin-import``

npm install babel-plugin-import --save -dev

二、安装 `react-app-rewired`

npm install react-app-rewired --save -dev
react-app-rewired是一个再配置的工具。安装完之后在根目录新建一个config-overrides.js的文件，在这个配置文件中新增加自己的自定义配置，可以实现在不eject的情况下自定义配置。

三、安装 `customize-cra`

npm install customize-cra --save -dev
注意在安装 customize-cra 之前要要先安装react-app-rewired

在我们创建的 config-overrides.js的文件中添加如下代码

const { override, fixBabelImports } = require('customize-cra');
module.exports = override(
    fixBabelImports('import', {        
        libraryName: 'antd',        
        libraryDirectory: 'es',       
        style: 'css'
    })
)

四、修改 package.json 文件

将项目 package.json 文件中原本scripts中的代码：

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

修改为下面的代码：

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom",
    "eject": "react-scripts eject"
  },

五、安装 ant design

npm install antd --save
在组件中直接导入ant design 中的组件，即可实现按需加载。