| title | date | tag | version |
|---|---|---|---|
hzero-front |
2020-07-20 |
HZero react dva webpack |
0.10.0 |
本项目是基于React的构建页面的JavaScriptUI库以及轻量级前端数据模型/状态管理框架dva, 并使用webpack 4.x构建本项目.
本项目主要HZero平台前端核心组件/模块/服务,支持通过lerna工具,将本项目作为monorepo(多模块,多package管理模式)模式作为多模块项目的核心子项目
我们提供了一套方案可以基于本项目快速构建全新的monorepo项目,其中包含如下工具
React是用于构建用户界面的JavaScript库,本项目采用全新的react v16.8.x,其中包含一些全新的特性.且本项目会持续同步react版本.
更多请参考React Github或React官网
dva是基于 redux、redux-saga 和 react-router 的轻量级前端框架。
请参考dva Github，相关问题可以在dva Github issues咨询
用于构建/打包前端工程,本项目采用全新webpack v4.28.x,其中包含全新的特性/性能优化/社区最佳实践
请参考webpack
本项目是基于hzero-cli工具创建
请参考hzero-cli.
下面是关于本项目的使用说明
-
node.js: v12.x
关于node.js请参考: https://nodejs.org/en/
-
内存:
- 开发者模式运行内存: >4GB
- 生产环境编译运行内存: >4GB
-
yarn: 推荐使用yarn管理本项目
执行如下命令全局安装yarn
$ npm install --global yarn关于
yarn请参考 https://yarnpkg.com -
lerna: 用于管理具有多个
package的JavaScript项目的工具。执行如下命令全局安装
$ npm install --global lerna关于
lerna请参考https://lernajs.io/ -
hzero-cli: 用于管理子模块创建、编译的工具
执行如下命令全局安装
$ npm install -g hzero-cli关于hzero-cli更多用法请参考文档
-
开发工具: 推荐使用Visual Studio Code编辑器
Visual Studio Code推荐插件:
- Chinese (Simplified) Language Pack for Visual Studio Code
- Debugger for Chrome
- EditorConfig for VS Code
- ESLint
- GitLens — Git supercharged
- YAML
- Code Spell Checker
关于本项目(hzero-front/hzero-front-*)开发方式/流程说明如下:
使用如下命令clone本项目
git clone https://code.choerodon.com.cn/hzero-hosp/hzero-front.git
cd hzero-front由于本项目使用lerna管理项目packages,所以初始化项目请务必执行如下初始化命令,确保主体项目和packages子项目依赖安装正确
执行如下命令,安装本项目packages依赖(即初始化workspace)
$ 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/在开发模式下,可以执行如下命令可以跳过puppeteer安装过程中下载Chromium
$ export PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1 #macos/linux # set PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1 #windows
build dll: 本项目开启webpack dll插件,所以在执行启动/build操作之前,请务必执行如下命令
$ yarn build:dllhzero-front主体工程依赖于packages下的各模块,所以需要编译packages下的各模块,执行如下命令
$ yarn transpile:prod或者
$ lerna run transpile接下来,确保dll操作已经执行成功后,执行如下命令,即可启动hzero-front主体工程
$ yarn start启动成功后,请访问如下地址即可
http://localhost:8000本项目中packages模块均可独立编译/打包/部署,即支持webpack-dev-server,所以执行如下命令启动packages模块
$ cd packages/<hzero front module>
# cd packages/hzero-front-hiampackages模块项目也开启webpack dll插件,所以在执行启动/build操作之前,请务必执行如下命令
$ yarn build:dll再执行如下命令即可启动单个packages模块服务
$ yarn start初始化子模块
若在项目中使用了
git submodule进行子模块管理，需要在首次拉取代码后进行初始化操作。$ git submodule update --init --recursive
在执行完build dll操作之后,执行如下命令即可构建用于生产环境的项目
$ yarn build文件 docker/default.conf 为默认的项目Nginx配置文件，如需修改Nginx配置需要在此更改，在构建 Docker镜像时,Dockerfile中的指令会将该文件复制到nginx配置目录下。
由于基础镜像暂未开启 gzip，在本项目Dockerfile中存在指令来更改默认的Nginx配置文件，以使gzip生效，如下：
RUN sed -i 's/\#gzip/gzip/g' /etc/nginx/nginx.conf;如需关闭 gzip，将该行注释即可。
.
├── CHANGELOG.md // 项目变更日志
├── 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
│ ├── hzero-front // hzero-front模块包含hzero-front主要components/utils等
│ ├── hzero-front-hagd // hzero-front-hagd 模块
│ ├── hzero-front-hcnf // hzero-front-hcnf 模块
│ ├── hzero-front-hdtt // hzero-front-hdtt 模块
│ ├── hzero-front-hfile // hzero-front-hfile 模块
│ ├── hzero-front-hiam // hzero-front-hiam 模块
│ ├── hzero-front-himp // hzero-front-himp 模块
│ ├── hzero-front-hitf // hzero-front-hitf 模块
│ ├── hzero-front-hmsg // hzero-front-hmsg 模块
│ ├── hzero-front-hpfm // hzero-front-hpfm 模块
│ ├── hzero-front-hptl // hzero-front-hptl 模块
│ ├── hzero-front-hrpt // hzero-front-hrpt 模块
│ ├── hzero-front-hsdr // hzero-front-hsdr 模块
│ ├── hzero-front-hsgp // hzero-front-hsgp 模块
│ └── hzero-front-hwfl // hzero-front-hwfl 模块
├── 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 // 全局数据模型
│ ├── router.js // 路由管理逻辑文件
│ ├── routes // 项目核心业务逻辑/页面
│ │ └── index.js // 入口文件
│ ├── serviceWorker.js // 静态缓存service worker
│ ├── services // 项目接口逻辑层
│ ├── setupProxy.js // mock静态数据代理服务器配置文件
│ └── utils // 项目业业务逻辑通用方法
│ └── router.js // 路由控制逻辑文件
└── yarn.lock // 项目yarn node.js模块配置文件 本项目采用conventional-changelog和standard-version管理CHANGELOG和版本管理,包括git tags的管理
将本项目发布到nexus npm私有源仓库
执行如下命令
$ cd packages/<hzero front module>
$ yarn transpile执行如下命令
echo -n 'username:password' | openssl base64将生成的auth hash按照如下方式配置
email=yourname@hand-china.com
always-auth=true
_auth=yourbase64hashcode
执行如下命令将上面的配置加入到node.js全局环境变量配置文件.npmrc中
$ npm config edit 再执行如下命令发布即可
$ npm publish --registry http://nexus.saas.hand-china.com/content/repositories/hzero-ui/git配置中，用户名需使用本人姓名，邮箱使用公司邮箱。
git config --global user.name "yourname"
git config --global user.email "youremail@hand-china.com"- 分支使用
- 分支标识符
feature: 新功能开发/新服务开发 hotfix/bugfix: bug 修复
- 开发使用
新功能/新服务开发，需要创建 feature 分支。
规范：
feature-工号-服务
例如：
feature-13492-hiam
- 版本 bug 修复
对于已经发版的功能，bug 修复时，需要创建对应版本的分支。
规范：
hotfix-vxxx-工号
例如：
hotfix-v1.0.x-15664
- commit 操作标识符
fix：修复bug
feat：更新/新增文件/新特性
delete：删除文件- commit 规范
[操作标识符][服务][空格]][功能模块][:][commit 内容]例如：
fix(hzero-front-hitf) 应用类型: 修改测试映射类字段
feat(hzero-front-hchg) 服务计费: 添加服务计费功能
feat(hzero-front) im: 开发临时会话功能,优化消息类别处理备注：
- 服务指的是：hzero-front-hpfm、hzero-front、hzero-front-hiam这些服务模块；
- 功能模块指的是具体的功能，比如：角色管理，子账户管理；
- 如果修改的是更具体的功能，与菜单无关的，比如，hzero-front的DefaultLayout布局，则功能模块指的就是DefaultLayout；
@中台技术中心·HZero技术团队