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

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';
  4. export default (): React.ReactNode => {
  5. return (
  6. <PageContainer>
  7. <Card>
  8. </Card>
  9. </PageContainer>
  10. );
  11. };

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

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.jssrc/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. };
    7. type NoticeIconItemType = 'notification' | 'message' | 'event';
    8. type NoticeIconItem = {
    9. id?: string;
    10. extra?: string;
    11. key?: string;
    12. read?: boolean;
    13. avatar?: string;
    14. title?: string;
    15. status?: string;
    16. datetime?: string;
    17. description?: string;
    18. type?: NoticeIconItemType;
    19. };
  • 修改 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 || {}), }); }

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

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