hzero-front-runtime是基于React的构建页面的JavaScriptUI库以及轻量级前端数据模型/状态管理框架dva, 并使用webpack 4.x构建本项目.
本项目主要为基于hzero-front创建的项目提供基础运行/开发环境/配置等,支持通过lerna工具,将本项目作为monorepo(多模块,多package管理模式)模式作为多模块项目的核心子项目
我们提供了一套方案可以基于本项目快速构建全新的monorepo项目,配合HZERO Front Cli工具即可轻松搭建全新的基于HZERO Front的前端工程
目录
介绍
关于React
React是用于构建用户界面的JavaScript库,本项目采用全新的react v16.8.x,其中包含一些全新的特性.且本项目会持续同步react版本.
更多请参考React Github或React官网
关于dva框架
dva是基于 redux、redux-saga 和 react-router 的轻量级前端框架。
请参考dva Github，相关问题可以在dva Github issues咨询
关于webpack
用于构建/打包前端工程,本项目采用全新webpack v4.28.x,其中包含全新的特性/性能优化/社区最佳实践
请参考webpack
关于Create React App
本项目是基于Create React App脚手架创建,并执行了yarn eject命令
请参考Create React App.
使用
下面是关于本项目的使用说明
环境变量
-
node.js: v10.x or v8.x(>= v8.10)
关于node.js请参考: https://nodejs.org/en/
-
yarn: 推荐使用yarn管理本项目
执行如下命令全局安装yarn
$ npm install --global yarn关于
yarn请参考 https://yarnpkg.com -
lerna: 用于管理具有多个
package的JavaScript项目的工具。A tool for managing JavaScript projects with multiple packages. 执行如下命令全局安装
$ npm install --global lerna关于
lerna请参考https://lernajs.io/
安装hzero-front-runtime
执行如下命令
$ yarn add hzero-front-runtime --registry=http://nexus.saas.hand-china.com/content/groups/hzero-npm-group/
# npm install hzero-front-runtime --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
hzero-front-runtime 提供了lerna工具用与管理packages
若安装了packages,则执行如下命令安装packages的相关依赖
$ lerna bootstrap
关于
lerna请参考https://lernajs.io/ 关于lerna在HZERO Front/基于HZERO Front的项目中的使用请参考lerna
使用子模块
若在项目中使用了 git submodule 进行子模块管理，需要在首次拉取代码后进行初始化操作。
$ git submodule update --init --recursive
启动项目/开发者模式
请确保dll已编译完成,然后执行如下命令用于执行hzero-front-runtime提供的webapck启动项目操作
$ yarn start
cross-env BASE_PATH=/ CLIENT_ID=localhost BPM_HOST=http://192.168.12.103:8330 API_HOST=http://hzerodevb.saas.hand-china.com WEBSOCKET_HOST=ws://172.20.0.202:8260 HARD_SOURCE=none node --max_old_space_size=4096 ./node_modules/roadhog/bin/roadhog.js dev
- start 会设置几个环境变量, 您可以改变他们来适应自己的项目
- BASE_PATH: 部署在子目录时需要改变。 例如 部署在 /demo/ 下; 则该变量的值为 /demo/
- CLIENT_ID: 是hzero后端所需要的客户端参数
- BPM_HOST: 工作流的接口地址
- API_HOST: 请求接口的地址
- WEBSOCKET_HOST: websocket 地址
启动成功后,请访问如下地址即可
http://localhost:8000
构建
请确保dll已编译完成,然后执行如下命令用于执行hzero-front-runtime提供的webapck启动的编译操作
$ yarn build
最终静态文件会生成至如下目录
/dist
build 会设置几个环境变量, 您可以改变他们来适应自己的项目。
变量名及含义如下表所示：
| 变量名 | 含义 | 构建后需要替换 |
|---|---|---|
| BASE_PATH | 部署在子目录时需要改变。 例如 部署在 /demo/ 下; 则该变量的值为 /demo/ | 是 |
| CLIENT_ID | hzero 后端进行 OAUTH 认证所需要的客户端参数 | 是 |
| BPM_HOST | 工作流的接口地址 | 是 |
| API_HOST | 请求接口的地址 | 是 |
| WEBSOCKET_HOST | websocket 地址 | 是 |
| ESLINT | 由于在提交的时候已经校验过了 所以这里不执行校验以提升打包速度 | 否 |
| PLATFORM_VERSION | 系统是OP版还是SAAS版 | 是 |
替换操作
如果采用 jenkins 进行构建，则需要在 build 结束后手动执行 ./docker/enterpoint.sh 进行变量替换，因而需要在脚本中填写实际的变量值。
而如果采用 gitlab CI 进行构建，这些变量的值配置于 /charts/hzero-front/values.yaml 内，在构建时会将这些变量设置到当前执行环境，在脚本执行时便可读取以进行替换。
Nginx 配置
文件 docker/default.conf 为默认的项目 Nginx 配置文件，如需修改 Nginx 配置需要在此更改，在构建 Docker 镜像时，Dockerfile 中的指令会将该文件复制到 nginx 配置目录下。
由于基础镜像暂未开启 gzip，在本项目 Dockerfile 中存在指令来更改默认的 Nginx 配置文件，以使 gzip 生效，如下：
RUN sed -i 's/\#gzip/gzip/g' /etc/nginx/nginx.conf;
如需关闭 gzip，将该行注释即可。