按需加载 antd 的实现方式:
用 create-react-app 创建项目后,如果需要第三方的插件库,需要配置 webpack 配置文件,步骤如下:
- 首先运行 npm run eject 暴露出 webpack 的配置文件,项目对多出 config 和 scripts 文件夹
- 安装完 antd 和 babel-plugin-import 后,修改根目录下的 package.json babel 处,在persets 后面添加
"plugins":[["import",{"libraryName": "antd", "style": "css"}]]
"babel": {
"presets": [
"react-app"
],
"plugins": [
[
"import",
{
"libraryName": "antd",
"style": "css"
// 引入样式为 css
// style为true 则默认引入less
}
]
]
}
安装antd:
npm i antd --save
安装 babel-plugin-import:
cnpm i babel-plugin-import --save-dev
运行 npm start 开启,在文件中按需要引入 antd 的组件即可
import React from 'react';
import { Button } from 'antd';
class App extends React.Component {
render() {
return (
<div>
<header> <Button type="danger">lock me</Button> </header>
</div>
)
}
}
![ba3e44879962115f4bd34eea7b878e3f.png](https://img-blog.csdnimg.cn/img_convert/ba3e44879962115f4bd34eea7b878e3f.png)