antd简介
antd 是蚂蚁金服推出的一套非常好的React UI库,使用起来特别方便,而且也推出了Antd手机端库,同时还推出了vue的使用方式
- 如果没有按需加载,我们如果想要使用一个标签,比如
Button
,需要导入js和css文件,使用起来不是很方便,而且还会造成性能上面的一个下降,先来看一下正常版本的使用
import React from 'react';
import {
Button
} from 'antd';
import "antd/dist/antd.css";
function App() {
return (
<div className="App">
123
<Button>
按钮
</Button>
</div>
);
}
export default App;
按需加载
在antd的官网上我们看到了,他说需要babel-plugin-import
,然后按照他的配置即可
结果发现我的不好使!那么经过不断搜索和填坑,终于找到了好用的方式,一共有两种
一. 暴露配置
- 按照需要的依赖
yarn add babel-plugin-import --dev // 安装
- 在package.json中找到
eject
"scripts": {
"eject": "react-scripts eject"
}
运行命令
npm run eject
注意: 此操作是不可逆的,他会暴露创建react时候的webpack的配置,而且这个命令只能在刚刚使用脚手架创建好项目之后运行(文件的结构不能发生改变的时候才能暴露)
- 修改webpack.config.dev(开发环境)和webpack.config.prod(构建环境)下的 Process JS with Babel.下的那个options为:
options: {
plugins: [
['import',[{ // 导入一个插件
libraryName: 'antd', // 暴露的库名
style: true // 直接将ants样式文件动态编译成行内样式插入,就不需要每次都导入
}]]
],
cacheDirectory: true,
},
和
options: {
plugins: [
['import',[{ // 导入一个插件
libraryName: 'antd', // 暴露的库名
style: true // 直接将ants样式文件动态编译成行内样式插入,就不需要每次都导入
}]]
],
compact: true,
},
- 重新运行一下项目,就可以直接引入组件了
import { Button } from 'antd';
这种方式必须暴露配置,这回让我们开发的时候不是很方便,所以推荐下面的这种方式
二. (推荐)使用react-app-rewired
- 安装依赖
npm i react-app-rewired@2.0.2-next.0 babel-plugin-import customize-cra
这个时候就会有一个比较大的坑,react-app-rewired必须制定版本,否则报错
- 修改启动方式,在package.json中
原版
"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",
"eject": "react-app-rewired eject"
},
- 在项目的根目录下创建
config-overrides.js
const {
override,
fixBabelImports,
addLessLoader,
} = require("customize-cra");
module.exports = override(
fixBabelImports("import", {
libraryName: "antd", libraryDirectory: "es", style: true // change importing css to less
}),
addLessLoader({
javascriptEnabled: true,
modifyVars: { "@primary-color": "#1DA57A" }
})
);
- 重新启动项目,就可以按需加载了
import { Button } from 'antd';
总结
使用
react-app-rewired
来代替react-scripts
的启动方式,并且安装所需要的依赖,在根目录创建config-overrides.js
文件,导入配置即可完成
如果还有问题,可以看我的Demo合集