Antd4
Ant Design 4（Antd4） 是由蚂蚁金服核心团队开发的一套基于React的企业级UI设计语言和组件库，它提供了丰富的、高质量的组件和工具，以支持快速构建高质量的用户界面。
适用端
Antd4 适合企业级中后台产品与前台桌面网站，同时也支持现代浏览器、服务端渲染以及Electron。
官网
4x-ant-design.antgroup.com/index-cn
引入
npm install antd
或
yarn add antd
基本使用
antd 默认支持基于 ES modules 的 tree shaking，js部分直接引入 import { Button } from 'antd' 就会有按需加载的效果。
import React from 'react';
import { Button, Radio } from 'antd';
function App() {
return (
<div className="App">
<Button type="primary">Button</Button>
<Radio>Radio</Radio>
</div>
);
}
export default App;
高级配置
React项目中使用高级配置如插件、编译配置等需要自定义 webpack 配置，Craco（Create React App Configuration Override）是一个用于覆盖React项目配置的社区方案，它允许开发者在不使用 eject 命令的情况下，轻松地自定义 Babel、ESLint、PostCSS 等配置。
开发者可以通过在项目根目录添加一个 craco.config.js 文件来定制化自己的项目配置，这使开发者不仅可以享受到 Create React App 的所有好处，同时还能保留对项目配置的完全控制。
安装Carco
npm install @craco/craco -D
修改 package.json 配置
"scripts": {
- "start": "react-scripts start",
- "build": "react-scripts build",
- "test": "react-scripts test",
+ "start": "craco start",
+ "build": "craco build",
+ "test": "craco test",
}
在项目根目录创建 craco.config.js 用于修改默认配置
module.exports = { // ...};
支持less
安装依赖 craco-antd
npm install craco-antd -D
修改 src**/App.css** 为 src/App.less，然后修改样式引入
- import './App.css';
+ import './App.less';
自定义主题
修改 craco.config.js
const CracoAntDesignPlugin = require('craco-antd');
module.exports = {
plugins: [
{
plugin: CracoAntDesignPlugin,
options: {
customizeTheme: {
'@primary-color': '#1DA57A',
},
},
},
],
};
重修服务，看到antd主题色发生改变即为成功。
按需引入
craco-antd 插件中包含了 babel-plugin-import 插件，默认配置了按需引入，无需额外引入
完整配置
craco.config.js 文件
const CracoAntDesignPlugin = require('craco-antd');
module.exports = {
reactScriptsVersion: 'react-scripts',
plugins: [
{
plugin: CracoAntDesignPlugin,
options: {
customizeTheme: {
'@primary-color': 'red',
},
},
},
],
}
tsconfig.json 文件
// tsconfig.json
{
"compilerOptions": {
"target": "es5",// 目标语言的版本
"lib": ["dom", "dom.iterable", "es2015.promise", "esnext"],
// 编译时引入的 ES 功能库，包括：es5 、es6、es7、dom 等。// 如果未设置，则默认为： target 为 es5 时: ["dom", "es5", "scripthost"]
//target 为 es6 时: ["dom", "es6", "dom.iterable", "scripthost"]
"allowJs": true, // 允许编译器编译JS，JSX文件
"checkJs": true, // 允许在JS文件中报错，通常与allowJS一起使用
"skipLibCheck": true,
"esModuleInterop": true,// 允许export=导出，由import from 导入
"allowSyntheticDefaultImports": true,
"strict": true,// 开启所有严格的类型检查
"forceConsistentCasingInFileNames": true,
"module": "esnext",// 生成代码的模板标准
"moduleResolution": "node",// 模块解析策略，ts默认用node的解析策略，即相对的方式导入
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,// 不输出文件,即编译后不会生成任何js文件
"jsx": "react",//在 .tsx 中支持 JSX ：React 或 Preserve
"strictFunctionTypes": false,// 不允许函数参数双向协变
"downlevelIteration": true,// 降级遍历器实现，如果目标源是es3/5，那么遍历器会有降级的实现
"noFallthroughCasesInSwitch": true,// 防止switch语句贯穿(即如果没有break语句后面不会执行)
"baseUrl": "./src" // 解析非相对模块的基地址，默认是当前目录
},
"include": ["src", "**/*.ts", "**/*.tsx"],
"exclude": ["./node_modules"]
}
package.json 文件
{
"name": "my-react-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@craco/craco": "^7.0.0",
"@craco/types": "^7.0.0",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^27.5.2",
"@types/node": "^16.18.122",
"@types/react": "^18.3.18",
"@types/react-dom": "^18.3.5",
"antd": "^4.24.16",
"cra-template-typescript": "1.2.0",
"craco-antd": "^2.0.0",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-scripts": "5.0.1",
"typescript": "^4.9.5"
},
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
问题
依赖冲突
解决方案忽略预设置
npm install craco-antd --legacy-peer-deps
或者
npm install craco-antd --force
友情提示
见原文：【React】TypeScript项目中使用Antd4)
本文同步自微信公众号 "程序员小溪" ，这里只是同步，想看及时消息请移步我的公众号，不定时更新我的学习经验。
