AntDesignPro-Demo

初探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

删除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速度很慢,删除后拉包速度显著提升,一般情况下的公司前端开发不需要自己编写前端自动化测试用例.所以删除了

整合graphql

使用umi-plugin-apollo整合graphql中遇到的坑详情请跳入链接点击我

AntDesignPro去掉国际化

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编译page下的`.umi`

umi在编译时对路由和dva进行了预处理封装.所以在page目录下会生成隐藏文件夹📂.umi,这个目录会在每次重启yarn start的时候,重新进行编译.

这个目录下的文件,最多只能用`console``来查看传值和实现,请勿修改里面的内容,这样就算下次编译以后也不会生效.

`node_modules`重新拉取的问题

在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', // 主字号
  },

具体配置可参考官网示例。

webpack优化

如何在打包过程中去掉console

在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

less样式覆盖

如何覆盖局部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 粘性定位来固定，对较低版本的浏览器不兼容，建议先进行版本锁定。

后续采坑继续补充...

...

Terry-bear/AntDesignPro-Demo