• 新服务开发流程

    新服务开发分为平台(HZERO)开发和项目开发两种。

    1. 平台开发

    1.1 服务命名

    新服务命名格式为hzero-front-xxx

    新服务的代码文件夹需要和其他服务模块一样,放在根目录下的 packags 文件夹下

    packages文件目录

    1.2 配置文件

    配置文件请参照其他hzero-front-xxx模块文件内的配置文件进行配置即可。

    1.3 添加API服务前缀

    先在packages/hzero-front/config/apiConfig.js中,在config中添加新模块的API 比如新模块名为 hzero-front-new

    const config = {
      //...
      // new 模块
      HZERO_NEW: {
        init: () => {
          return "'/new'";
        },
        route: true,
      },
    },
    

    添加过后,使用node命令在根目录下运行packages/hzero-front/scripts/genConfig.js文件。必须运行该文件。

    node ./packages/hzero-front/scripts/genConfig.js
    

    如果有安装run code插件,可以直接右键genConfig.js这个文件后,点击run code即可。

    添加完成后,需要重新编译 hzero-front 模块的文件。在根目录下执行下面的命令,单独编译该模块文件:

    lerna run transpile --scope hzero-front
    

    或者在根目录下执行下面的命令,编译所有文件:

    lerna run transpile
    

    1.4 添加模块路由

    src/utils/getModuleRouters.js文件中添加模块路由,代码格式如下图所示,

    添加对应模块路由

    1.5 代码开发

    详情查看:前端开发指引

    1.6 单模块启动测试

    代码编写完成后,需要单个模块启动测试,在单模块路径下执行如下语句:

    启动方法:在该服务模块文件目录下执行:

    yarn build:dll    // 此行命令只需要在需要第一次启动时执行
    yarn start
    

    如:对hfile服务模块进行单模块启动,执行路径为:

    单模块启动

    1.7 全局启动测试

    hzero-front主体工程依赖于packages下的各模块,所以需要编译packages下的各模块,在 根目录 下执行如下命令,执行路径为:

    全局启动

    yarn transpile:prod
    

    或者

    lerna run transpile
    

    接下来,确保dll操作已经执行成功后,执行如下命令,即可启动hzero-front主体工程

    yarn start
    

    1.8 UI使用

    新的功能模块的开发必须要用 Choerodon UI,优先使用Pro版本的组件,Pro版没有的才使用普通版本的组件。

    2. 项目开发

    创建新项目的流程,见 前端开发流程

    项目目录

    .
    ├── Dockerfile                                            // docker配置文件
    ├── README.md                                             // 项目说明
    ├── charts
    ├── config                                                // 项目基本配置,包含webpakc相关/路由相关/测试相关/样式相关
    │   ├── alias.js                                          // webpack.config别名alias配置
    │   ├── env.js                                            // node.js环境变量配置
    │   ├── jest                                              // jest单元测试工具配置文件
    │   │   ├── cssTransform.js
    │   │   └── fileTransform.js
    │   ├── paths.js                                          // 静态文件路径配置文件
    │   ├── routers.js                                        // 项目菜单路由配置文件
    │   ├── theme.js                                          // 默认样式配置文件
    │   ├── webpack.config.js                                 // webpack默认配置文件
    │   ├── webpack.dll.config.js                             // webpack dll插件配置文件
    │   └── webpackDevServer.config.js                        // webpack dev server开发者模式配文件
    ├── docker                                                // docker镜像配置相关
    │   ├── default.conf                                      // nginx 配置文件
    │   └── enterpoint.sh
    ├── jsconfig.json                                         // 开发工具(Visual Studio Code)代码兼容性配置文件
    ├── lerna.json                                            // lerna多package JavaScript项目管理配置文件
    ├── mock                                                  // mock静态数据服务配置相关
    │   ├── ...
    │   └── index.js
    ├── package.json                                          // 本项目配置node.js 配置文件
    ├── packages                                             // 存放所有服务模块文件目录
    │   ├── xxxx-front                                       // xxxx-front模块包含xxxx-front主要components/utils等
    │   └── xxxx-front-demo                                  // xxxx-front-demo 模块 
    ├── public                                                // 公共静态资源目录
    │   ├── ...
    │   └── index.html                                        // 本项目主页面html文件
    ├── scripts                                               // 本项目脚本文件包括webpack/模块化编译等 
    │   ├── build.js                                          // 生产环境编译脚本文件
    │   ├── build.lib.js                                      // babel模块化编译脚本文件 
    │   ├── start.js                                          // 项目开发者模式dev server启动脚本文件
    ├── src                                                   // 工作目录,包含项目业务逻辑代码等
    │   ├── assets                                            // 静态小资源目录
    │   ├── index.js                                          // 项目入口文件
    │   ├── index.less                                        // 项目全局样式
    │   ├── models                                            // 项目数据模型
    │   │   └── global.js                                     // 全局数据模型
    │   ├── routes                                            // 项目核心业务逻辑/页面 
    │   │   └── index.js                                      // 入口文件
    │   ├── serviceWorker.js                                  // 静态缓存service worker 
    │   ├── services                                          // 项目接口逻辑层 
    │   ├── setupProxy.js                                     // mock静态数据代理服务器配置文件
    │   └── utils                                             // 项目业业务逻辑通用方法 
    │       └── router.js                                     // 路由控制逻辑文件
    └── yarn.lock                                             // 项目yarn node.js模块配置文件 
    
    

    2.1 服务模块存放位置

    新服务的代码文件夹需要和其他服务模块一样,放在根目录下的 packags 文件夹下

    packages文件目录

    2.2 创建新服务模块

    使用 hzero-front-cli 创建,在根目录下执行

    # 其他模块 xxxx-front-anew,用于开发业务功能
    hzero-front-cli . --create-packages 'xxxx-front-anew'
    

    2.3 添加API服务前缀

    先在packages/xxx-front/config/apiConfig.js中,(xxx为项目名)。在config中添加新模块的API 比如新模块名为 demo-anew

    const config = {
      //...
      // new 模块
      DEMO_ANEW: {
        init: () => {
          return "'/anew'";
        },
        route: true,
      },
    },
    

    添加过后,使用node命令在根目录下运行packages/xxx-front/scripts/genConfig.js文件。必须运行该文件。(xxx为项目名)

    node ./packages/xxx-front/scripts/genConfig.js
    

    如果有安装run code插件,可以直接右键genConfig.js这个文件后,点击run code即可。

    运行完这个文件后,packages/xxx-front/src/utils/config.js文件会自动发生变化,无需手动更改。

    添加完成后,需要重新编译 xxx-front 模块的文件,在根路径下执行下面的命令,单独编译该模块文件。

    lerna run transpile --scope xxx-front
    

    或者在根目录下执行下面的命令,编译所有文件:

    lerna run transpile
    

    2.4 添加模块路由

    src/utils/getModuleRouters.js文件中添加模块路由,代码格式如下图所示,(anew的位置替换为设置的新服务名,xxx-为项目名)

    // ...
    import * as xxxFrontAnewRouters from 'xxx-front-anew/lib/utils/router';
    
    export default app =>
      getModuleRouters(app, [
        // ...
        xxxFrontAnewRouters,
      ]);
    

    2.5 代码开发

    详情查看:前端开发指引

    2.6 安装依赖

    在根目录下执行:

    lerna bootstrap --registry http://nexus.saas.hand-china.com/content/groups/hzero-npm-group/
    

    或者

    yarn --registry http://nexus.saas.hand-china.com/content/groups/hzero-npm-group/
    

    2.7 单模块启动测试

    代码编写完成后,需要单个模块启动测试,在单模块路径下执行如下语句:

    启动方法:

    yarn build:dll    // 此行命令只需要在需要第一次启动时执行
    yarn start
    

    如:对hfile服务模块进行单模块启动,执行路径为:

    单模块启动

    2.8 全局启动测试

    hzero-front主体工程依赖于packages下的各模块,所以需要编译packages下的各模块,在 根目录 下执行如下命令,执行路径为:

    全局启动

    yarn transpile:prod
    

    或者

    lerna run transpile
    

    接下来,确保dll操作已经执行成功后,执行如下命令,即可启动hzero-front主体工程

    yarn start