本章是这个教程正文的完结部分，主要内容是清理（删除）那些我们用不到的代码，以便让这个前端程序更好地为实际工程项目服务。

21.1 修改“欢迎页”的代码

  • 删除路由设置

在config/routes.ts文件中

  1. - {
  2. -   path: '/admin',
  3. -   name: 'admin',
  4. -   icon: 'crown',
  5. -   access: 'canAdmin',
  6. -   component: './Admin',
  7. -   routes: [
  8. -     {
  9. -       path: '/admin/sub-page',
  10. -       name: 'sub-page',
  11. -       icon: 'smile',
  12. -       component: './Welcome',
  13. -     },
  14. -   ],
  15. - },
  • 删除文件 src/pages/Welcome.less
  • 删除文件 src/pages/Welcome.less
  • 删除文件 src/pages/Admin.tsx
  • 修改欢迎页 src/pages/Welcome.tsx 代码

将原有代码全部删除，用下述代码替换

  1. import React from 'react';
  2. import { PageContainer } from '@ant-design/pro-layout';
  3. import { Card } from 'antd';
  5. export default (): React.ReactNode => {
  6.   return (
  7.     <PageContainer>
  8.       <Card>
  10.       </Card>
  11.     </PageContainer>
  12.   );
  13. };

在实际业务项目场景中可以根据具体的需求进行更准确地修改：修改默认重定向到其他页面，或者为欢迎页增加更多满足业务需求的内容。

21.2 删除TableList模块的代码

  • 删除路由设置

在config/routes.ts文件中

  1. - {
  2. -   name: 'list.table-list',
  3. -   icon: 'table',
  4. -   path: '/list',
  5. -   component: './TableList',
  6. - },
  • 删除文件 mock/listTableList.ts

  • 删除文件 src/pages/TableList

    21.3 删除全局搜索功能

  • 修改文件src/components/RightContent/index.tsx中的引用

    1. -import HeaderSearch from '../HeaderSearch';

  • 删除<HeaderSearch />有关的代码

  • 删除目录 src/components/HeaderSearch

    如果实际业务项目场景需要全局搜索功能，那么可以保留这个功能并在当前代码的基础上进行修改。

21.4 删除自动化文档功能

  • 对src/app.tsx做如下的修改
    1. -import { history, Link } from 'umi';
    2. +import { history } from 'umi';
    1. -import { BookOutlined } from '@ant-design/icons';
    ```typescript
  • links: [],
  • links: isDev
  • ? [
  • 业务组件文档
  • ,
  • ]

  • : [], ```

  • 在package.json中删除依赖 ```diff

  • “@umijs/preset-dumi”: “^1.1.7”, ```

  • 删除5个相关的目录

    1. $ cd node_modules
    2. $ rm -rf _@umijs_preset-dumi@1.1.18@@umijs
    3. $ rm -rf _dumi-assets-types@1.0.0@dumi-assets-types
    4. $ rm -rf _dumi-theme-default@1.1.1@dumi-theme-default
    5. $ rm -rf dumi-assets-types
    6. $ rm -rf dumi-theme-default

    需要注意的是，在实际的项目中具体的dumi版本号可能有所不同，建议在删除前用如下命令检查一下

    1. $ ls -1 node_modules | grep dumi

    此外 rm -rf 是一个非常危险的命令，一定要小心使用。

    21.5 删除和访问代理有关配置

  • 删除文件 config/proxy.ts

  • 修改config/config.ts配置
    1. -import proxy from './proxy';
    ```diff
  • 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中）

    1. type NoticeIconList = {
    2.   data?: NoticeIconItem[];
    3.   /** 列表的内容总数 */
    4.   total?: number;
    5.   success?: boolean;
    6. };
    8. type NoticeIconItemType = 'notification' | 'message' | 'event';
    10. type NoticeIconItem = {
    11.   id?: string;
    12.   extra?: string;
    13.   key?: string;
    14.   read?: boolean;
    15.   avatar?: string;
    16.   title?: string;
    17.   status?: string;
    18.   datetime?: string;
    19.   description?: string;
    20.   type?: NoticeIconItemType;
    21. };

  • 修改 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(‘/api/notices’, { method: ‘GET’, …(options || {}), }); }

  2. - 修改文件`src/components/NoticeIcon/index.tsx`
  3. ```diff
  4. -import { getNotices } from '@/services/ant-design-pro/api';
  5. +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(); };

  2. - 修改src/typings.d.ts，删除如下代码
  3. ```typescript
  4. // preview.pro.ant.design only do not use in your production ;
  5. // preview.pro.ant.design 专用环境变量，请不要在你的项目中使用它。
  6. 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”,
  • “version”: “1.0.0”, ```

    21.8 替换图标资源

    把下面四个图标（图片）替换为实际项目需要的文件
  • public/icons/icon-128x128.png
  • public/icons/icon-192x192.png
  • public/icons/icon-512x512.png
  • public/favicon.ico