Antd在react中的按需导入

2021-02-27 276 阅读1分钟

配置按需加载

安装依赖
npm install react-app-rewired customize-cra babel-plugin-import -D
在根目录创建config-overrides.js来取代react-scripts,可扩展webpack配置,类似于vue.config.js

const { override, fixBabelImports } = require('customize-cra');

module.exports = override(
  fixBabelImports("import", {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: 'css'
  })
)

修改package.json的scripts

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

最后就是导入组件了

不在需要导入一个全局的Antd的css文件了

例如使用Button组件只需要  import { Button } from 'antd';
然后直接使用即可