create-react-app方式下引入antd

create-react-app方式下引入antd

由于create-react-app构建React App的方式推荐zero-configuration(零配置),所以只能通过 npm run eject 的方式来讲所有的配置项暴露出来。要注意的eject操作是不可逆转的。

进入 项目根目录 安装antd npm install antd --save

安装完 antd , 默认所有的组件都会被引入,那项目将会变得很庞大,antd提供了按需加载的方式

步骤

  1. 安装babel-plugin-import
    npm install babel-plugin-import --save-dev
  2. 暴露配置项
    npm run eject
  3. 配置按需加载

    • 暴露配置项之后,会生成一个config的文件夹,首先我们先配置dev模式。prod模式与dev模式的配置相同。
    • 打开webpack.config.dev.js文件
      create-react-app方式下引入antd

    • * 即添加以下代码 *

      plugins: ['transform-runtime', ['import', {
         libraryName: 'antd',
         style: 'css'
       }]]
  4. 运行项目npm start
上一篇:Oracle性能优化


下一篇:Spring Boot 2.X(十八):集成 Spring Security-登录认证和权限控制