本章是这个教程正文的完结部分,主要内容是清理(删除)那些我们用不到的代码,以便让这个前端程序更好地为实际工程项目服务。
21.1 修改“欢迎页”的代码
- 删除路由设置
在config/routes.ts
文件中
- {
- path: '/admin',
- name: 'admin',
- icon: 'crown',
- access: 'canAdmin',
- component: './Admin',
- routes: [
- {
- path: '/admin/sub-page',
- name: 'sub-page',
- icon: 'smile',
- component: './Welcome',
- },
- ],
- },
- 删除文件
src/pages/Welcome.less
- 删除文件
src/pages/Welcome.less
- 删除文件
src/pages/Admin.tsx
- 修改欢迎页
src/pages/Welcome.tsx
代码
将原有代码全部删除,用下述代码替换
import React from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import { Card } from 'antd';
export default (): React.ReactNode => {
return (
<PageContainer>
<Card>
</Card>
</PageContainer>
);
};
在实际业务项目场景中可以根据具体的需求进行更准确地修改:修改默认重定向到其他页面,或者为欢迎页增加更多满足业务需求的内容。
21.2 删除TableList模块的代码
- 删除路由设置
在config/routes.ts
文件中
- {
- name: 'list.table-list',
- icon: 'table',
- path: '/list',
- component: './TableList',
- },
- 删除文件
mock/listTableList.ts
-
21.3 删除全局搜索功能
修改文件
src/components/RightContent/index.tsx
中的引用-import HeaderSearch from '../HeaderSearch';
删除
<HeaderSearch />
有关的代码- 删除目录
src/components/HeaderSearch
如果实际业务项目场景需要全局搜索功能,那么可以保留这个功能并在当前代码的基础上进行修改。
21.4 删除自动化文档功能
- 对
src/app.tsx
做如下的修改-import { history, Link } from 'umi';
+import { history } from 'umi';
```typescript-import { BookOutlined } from '@ant-design/icons';
- links: [],
- links: isDev
- ? [
- 业务组件文档
- ,
- ]
: [], ```
在package.json中删除依赖 ```diff
“@umijs/preset-dumi”: “^1.1.7”, ```
删除5个相关的目录
$ cd node_modules
$ rm -rf _@umijs_preset-dumi@1.1.18@@umijs
$ rm -rf _dumi-assets-types@1.0.0@dumi-assets-types
$ rm -rf _dumi-theme-default@1.1.1@dumi-theme-default
$ rm -rf dumi-assets-types
$ rm -rf dumi-theme-default
需要注意的是,在实际的项目中具体的
dumi
版本号可能有所不同,建议在删除前用如下命令检查一下$ ls -1 node_modules | grep dumi
21.5 删除和访问代理有关配置
删除文件
config/proxy.ts
- 修改
config/config.ts
配置
```diff-import proxy from './proxy';
- proxy: proxy[REACT_APP_ENV || ‘dev’],
```
如果实际项目需求需要API请求代理,应该用高性能的代理服务器软件(如Nginx)来实现。
21.6 删除不再适用的测试代码
删除src/e2e/baseLayout.e2e.js
和src/utils/utils.test.ts
两个用来做自动化测试的文件(原因不是不需要自动化测试,而是他们的内容已经完全不适合修改后的代码)。
21.7 其他零散的清理工作
- 删除文件
README.md
- 删除文件
mock/route.ts
- 删除文件
public/CNAME
- 删除文件
public/logo.svg
- 删除文件
public/pro_icon.svg
- 删除文件
src/services/ant-design-pro
- 删除文件
src/services/swagger
- 删除文件
src/components/index.md
修改
src/services/type.d.ts
,在TYPE
的命名空间中增加下面的内容(原来这些内容在ant-design-pro/api/typings.d.ts
中)type NoticeIconList = {
data?: NoticeIconItem[];
/** 列表的内容总数 */
total?: number;
success?: boolean;
};
type NoticeIconItemType = 'notification' | 'message' | 'event';
type NoticeIconItem = {
id?: string;
extra?: string;
key?: string;
read?: boolean;
avatar?: string;
title?: string;
status?: string;
datetime?: string;
description?: string;
type?: NoticeIconItemType;
};
修改
src/components/NoticeIcon/NoticeIcon.tsx
,把所有的API.NoticeIconItem
, 修改为TYPE.NoticeIconItem
- 创建内容如下的新文件
src/services/api/Notices.ts
```typescript import { request } from ‘umi’;
/* 此处后端没有提供注释 GET /api/notices /
export async function getNotices(options?: { [key: string]: any }) {
return request
- 修改文件`src/components/NoticeIcon/index.tsx`
```diff
-import { getNotices } from '@/services/ant-design-pro/api';
+import { getNotices } from '@/services/api/Notices';
- 修改src/utils/utils.ts,删除如下代码 ```typescript export const isAntDesignPro = (): boolean => { if (ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION === ‘site’) { return true; } return window.location.hostname === ‘preview.pro.ant.design’; };
// 给官方演示站点用,用于关闭真实开发环境不需要使用的特性 export const isAntDesignProOrDev = (): boolean => { const { NODE_ENV } = process.env; if (NODE_ENV === ‘development’) { return true; } return isAntDesignPro(); };
- 修改src/typings.d.ts,删除如下代码
```typescript
// preview.pro.ant.design only do not use in your production ;
// preview.pro.ant.design 专用环境变量,请不要在你的项目中使用它。
declare let ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION: 'site' | undefined;
- 修改.eslintrc.js和jest.config.js,删除如下代码 ```diff
ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION: true, ```
修改package.json,把name和version修改为满足实际需求的内容 ```diff
- “name”: “ant-design-pro”,
- “name”: “gong-jian-yun”,
- “version”: “5.0.0-beta.2”,
- public/icons/icon-128x128.png
- public/icons/icon-192x192.png
- public/icons/icon-512x512.png
- public/favicon.ico