create-react-app方式下引入antd
由于create-react-app构建React App的方式推荐zero-configuration(零配置),所以只能通过 npm run eject
的方式来讲所有的配置项暴露出来。要注意的eject操作是不可逆转的。
进入 项目根目录 安装antd npm install antd --save
安装完
antd
, 默认所有的组件都会被引入,那项目将会变得很庞大,antd
提供了按需加载的方式
步骤
- 安装babel-plugin-import
npm install babel-plugin-import --save-dev
- 暴露配置项
npm run eject
-
配置按需加载
- 暴露配置项之后,会生成一个config的文件夹,首先我们先配置dev模式。prod模式与dev模式的配置相同。
打开webpack.config.dev.js文件
-
* 即添加以下代码 *
plugins: ['transform-runtime', ['import', { libraryName: 'antd', style: 'css' }]]
- 运行项目
npm start