使用ant design
选用ant design UI框架
yarn add antd
index.js中引入antd的样式文件
import 'antd/dist/antd.css';
App.js修改为
import React from 'react';
import './App.css';
import {Button} from 'antd';
// 引入按钮组件
function App() {
return (
<div className="App">
<Button type="primary">Primary</Button>
</div>
);
}
export default App;
yarn start运行起来我们可以看到antd的按钮组件已经出来了
按需加载
到这一步就可以使用antd的各种组件写页面了。但是有个问题,使用了 import { Button } from ‘antd’; 的写法引入了 antd 下所有的模块,这会影响应用的网络性能。
所以我们要按需加载,只引用使用组件
第一种方法 babel-plugin-import
npm run eject
此时会提示,该命令不可逆,是否继续,输入y,这样所有配置项就都出来了。这时候也可以做一些定制化的配置了
如果上述方法报错,使用以下命令
主要问题是脚手架添加.gitgnore文件,但是却没有本地仓库
cd my-app
git init
git add .
git commit -m ‘Saving before ejecting’
npm run eject
下一步 安装babel-plugin-import
yarn add babel-plugin-import
打开.babelrc,添加
{
"plugins": [
["import", {
"libraryName": "antd",
"libraryDirectory": "es",
"style": "css" // `style: true` 会加载 less 文件
}]
]
}
这种方法会暴露所有的配置文件,操作需要谨慎,可以用下面这种方法
第二种方法 react-app-rewired
引入 react-app-rewired 并修改 package.json 里的启动配置。
yarn add react-app-rewired customize-cra
1 修改package.json
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
}
2 然后在项目根目录创建一个 config-overrides.js 用于修改默认配置。
module.exports = function override(config, env) {
// do stuff with the webpack config...
return config;
};
此时就实现按需加载了,
然后只需从 antd 引入模块即可,无需引入样式。
import { DatePicker } from ‘antd’;
如果想使用babel-plugin-import又不想npm run eject暴露所有配置文件,可以同时安装babel-plugin-import和react-app-rewired,然后执行上面的1 2 方法,并修改 *config-overrides.js内容为
const { override, fixBabelImports } = require('customize-cra');
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: 'css',
}),
);