• 初始化前端工程


    视频教程

    前置条件

    hzero-cli

    hzero-cli 是一个基于node的命令行工具,用于创建和构建hzero前端 工程。
    hzero-cli 的主要功能特性如下:

    源码仓库:https://code.choerodon.com.cn/hft/hzero-cli.git Demo:https://code.choerodon.com.cn/hft/hzero-front-demo.git

    起步

    下面将示范一下 hzero-cli 的简单使用流程

    安装 hzero-cli

    注意:hzero-cli 需要安装 node 10 以上的版本,这里建议安装 node 最新稳定版本(lts 版)。

    全局安装 hzero-cli 命令行工具

    npm install -g hzero-cli --registry http://nexus.saas.hand-china.com/content/groups/hzero-npm-group # 安装 hzero-cli 工具
    

    生成项目

    hzero-cli new sample # 创建 hzero 前端项目
    cd sample && hzero-cli info # 查看当前工程信息
    

    如果需要指定 hzero-front-xxx 版本可以运行:

    
    hzero-cli new sample -s \
      --hzero-packages hzero-front-hiam,hzero-front-hcnf@1.2.1,hzero-front-himp,hzero-front-hmsg,hzero-front-hpfm \
      --demo-name abcd \
      --set 'PLATFORM_VERSION=SASS,ABC=DEF,FFF=EEE' \
      --hzero-version 1.2.0
    
    cd sample && hzero-cli info 
    
    # -s 跳过 yarn install
    # --hzero-version 默认 hzero 模块版本
    # --hzero-packages hzero 包@版本, 这里的也可以设置包指定版本,优先级比 --hzero-version 高
    # --demo-name 新建默认子模块的名字
    # --set 'PLATFORM_VERSION=SASS' 设置 hzero 环境变量
    

    创建子模块

    npx hzero-cli g sub-module test-module  # 创建一个名字为 test-module 的子模块
    

    运行完成之后,当前项目目录会多一个文件夹,路径为 packages/sample-test-module。

    创建页面

    进入子模块目录:

    cd packages/sample-test-module
    

    在子模块下创建一个页面:

    npx hzero-cli g simple-page test-page # 创建一个名字为 test-page 的页面
    

    创建完成之后,会生成一个文件夹,路径为 packages/sample-test-module/src/routes/test-page。

    启动调试

    yarn start
    

    当开始编译后会自动打开浏览器,通过 localhost:8000,查看页面效果。

    全量编译

    进入父工程目录

    yarn run build
    

    全量编译会生成 dist 文件夹, 所有子模块的代码会编译到 dist/packages 以子模块的名字命名的文件夹下。

    增量编译

    进入父工程目录

    yarn run build:ms sample-test-module # 增量编译名字为 sample-test-module 的模块
    

    增量编译会把子模块文件重新生成到 dist/packages/xxx-module 下,同时还会更新子模块信息汇总文件 dist/packages/microConfig.json 。

    hzero-clihzero-front-cli 的关系

    hzero-front-cli 是 hzero-cli 的前身,都是 hzero 前端工程构建工具。 由于某些历史遗留问题,而且很多项目也一直依赖于 hzero-front-cli,导致 hzero-front-cli 的升级和重构比较困难。

    随着项目 hzero 前端模块越来越多,hzero 前端系统的页面也越来越多,基于 webpack 的全量构建方式的问题就逐渐暴露出来了。

    当编译的代码过多时,编译耗时和构建时的内存占用也会随之升高,构建耗时增多还算正常,但是构建内存占用的增加超过一点的量时,直接导致 gitlab-ci 的持续集成失败。

    所以我们新开发了一个工具 hzero-cli, hzero-cli 中采用了新的微前端架构和增量按需构建的方式解决了编译内存占用过高的问题。

    hzero-front-cli 和 hehzero-cli 对比:

    hzero-front-cli hzero-cli
    支持增量编译
    页面生成器
    ts支持

    相关文档

    1. hzero 开发手册
    2. choerodon-ui
    3. hzero + choerodon-ui 开发教程