title | date | tag | version |
---|---|---|---|
hzero-front |
2020-07-20 |
HZero react dva webpack |
0.10.0 |
本项目是基于React
的构建页面的JavaScript
UI库以及轻量级前端数据模型/状态管理框架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:dll
hzero-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-hiam
packages
模块项目也开启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 protected]
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 "[email protected]"
- 分支使用
- 分支标识符
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技术团队