初探AntDesignPro4.0用法和采坑记录 欢迎提issues来讨论自己遇到的问题.
tip：现在 umi 同步更新到了 3.0，迁移方案在官网很明确。umi官网迁移方案 AndDesign Pro 关于 umi3.0 迁移方案
使用yarn create umi会报错,导致脚手架无法生效,使用npm create umi选择Ant design pro问题解决
在区块官网下载区块即可.
区块中如果包含了package.json没有的依赖,在拉取区块的时候会卡死,原因目前不知道.
手动安装依赖npm install numeral@^2.0.6 react-router@^4.3.1, 安装成功后react的node_modules会消失,原因未知.
重新yarn一下,安装回来node_modules,项目正常启动.
删除package.json里面的：
- 关于提交前检查的项
"husky": { "hooks": { "pre-commit": "npm run lint-staged" } },- 关于jest测试用例
"jest-puppeteer": "^4.2.0",- 关于puppeteer浏览器
"optionalDependencies": { "puppeteer": "^1.17.0" },- 国际化文件
、src/locales/*
// 内置了package命令
npm run i18n-remove
// 这个脚本将会尝试删除项目中所有的 i18n 代码，对于复杂的运行时代码，表现并不好，慎用。
// 手动删除
yarn i18n-remove
删除 */locales/*国内镜像拉取Puppeteer速度很慢,删除后拉包速度显著提升,一般情况下的公司前端开发不需要自己编写前端自动化测试用例.所以删除了
使用umi-plugin-apollo整合graphql中遇到的坑 详情请跳入链接点击我
AntDesignPro整合了国际化的多语言,但是大多数项目是不需要多语言的,在Component或者page里面找到自己开发的页面,对应引入的包->
import { FormattedMessage, formatMessage } from 'umi-plugin-react/locale';
对应包内locales的中文版找出相关词,删除FormattedMessage, formatMessage的格式化.
在拉取区块的时候,umi会对所有引入的包在npm中寻找,所以区块的所有引用都是单独存在的.
如果你配置了全局的css样式或者request请求,请在引入区块后修改相应的import引入.
umi中区块用的很多Component其实都一样的,但是在引入时,会在page的Component里面生成同样的代码.
如果要对Component进行模块化管理和统一使用,需要将page目录下的Component移入根目录的Component,进行相关细节调整.
umi在编译时对路由和dva进行了预处理封装.所以在page目录下会生成隐藏文件夹📂.umi,这个目录会在每次重启yarn start的时候,重新进行编译.
这个目录下的文件,最多只能用`console``来查看传值和实现,请勿修改里面的内容,这样就算下次编译以后也不会生效.
在package.json文件中,我在开发过程中更新了最新的loadash.js,npm install重新拉取全部包结构的时候,发现npm对umi的结构进行了重新梳理.
后来无法正常启动,排查原因发现,是新版的yarn对包结构进行了优化,直接用yarn安装node_modules的速度快而稳定.
AntDesignPro官方使用umi-request·做接口请求。umi-request整合了axios和fetch的优点。
在extend方法中配置请求头，带入token。
/**
* 配置request请求时的默认参数
*/
const request = extend({
errorHandler, // 默认错误处理
credentials: 'same-origin', // 默认请求是否带上cookie
// mode: 'no-cors',
prefix: '/api',
headers: {
Authorization: window.localStorage.getItem('Authorization') || '', // 统一的headers
},
});接口调用异常的捕获。
/**
* 异常处理程序
*/
const errorHandler = (error: { response: Response }): void => {
const { response } = error;
console.log('errorHandler', error);
if (response && response.status) {
const errorText = codeMessage[response.status] || response.statusText;
const { status, url } = response;
// notification是AntDesign里面的组件，作为提醒用
notification.error({
message: `请求错误 ${status}: ${url}`,
description: errorText,
});
}
};接口调用返回值的处理
// response拦截器, 处理response
request.interceptors.response.use(async (response, options) => {
// 获取后端返回msg和code
const { code, msg } = await response.clone().json();
if (response.status === 200) {
if (code === 200 && !/query|get/g.test(response.url)) message.success(msg);
else if (typeof code === 'number' && code.toString().length >= 4) message.warning(msg);
else if (typeof code === 'number' && code === 401) message.warning(msg);
} else message.error(msg);
return response;
});全局化配置中可以修改全局样式文件。
在根目录下的config/config.ts或者config/config.js文件中配置
theme: {
'primary-color': primaryColor, // 主色调
'font-size-base': '12px', // 主字号
},具体配置可参考官网示例。
在AntDesignPro中，webpack使用的是4.0+，无法继续使用UglifyJsPlugin.
加上AntDesignPro中使用的是链式配置调用。—>chainWebpack
采坑发现使用最新的TerserPlugin可以解决此问题。
文件路径config/plugin.config.ts
config.optimization
// TODO TerserPlugin优化
.minimizer('terser-webpack-plugin')
.use(TerserPlugin, [
{
terserOptions: {
compress: {
drop_console: true,
},
},
},
])
.end()完美去除打包后的console
如何覆盖局部AntDesign组件样式?
找到组件中子class的名字,包裹一层global,示例:
.CardManual{
:global {
.antd-pro-pages-kanban-components-charts-chart-card-index-chartTop,
.antd-pro-pages-kanban-components-charts-chart-card-index-meta,
.antd-pro-pages-kanban-components-charts-chart-card-index-meta{
margin-bottom: 10px;
}
}
}在12 月份更新的版本中。 侧边栏和顶部导航采用了 sticky 粘性定位来固定，对较低版本的浏览器不兼容，建议先进行版本锁定。
...
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent