---
title: hzero-front-runtime
date: 2019-03-01
tag: HZero react dva webpack runtime lerna package yarn
version: 1.0.0
---
HZero Front Runtime
===
本项目是基于`React`的构建页面的`JavaScript`UI库以及轻量级前端数据模型/状态管理框架`dva`, 并使用`webpack 4.x`构建本项目.
本项目主要为基于hzero-front创建的项目提供基础运行/开发环境/配置等,支持通过`lerna`工具,将本项目作为`monorepo`(多模块,多`package`管理模式)模式作为多模块项目的核心子项目
我们提供了一套方案可以基于本项目快速构建全新的`monorepo`项目,配合[`HZero Front Cli`](https://code.choerodon.com.cn/hzero-hzero/hzero-front-cli)工具即可轻松搭建全新的基于`HZero Front`的前端工程
## 目录
* [介绍](##介绍)
* [使用](##使用)
* [项目目录](##项目目录)
* [Author](##Author)
* [Contributing](##Contributing)
## 介绍
### 关于React
React是用于构建用户界面的JavaScript库,本项目采用全新的react v16.8.x,其中包含一些全新的特性.且本项目会持续同步react版本.
更多请参考[React Github](https://github.com/facebook/react)或[React官网](https://reactjs.org/)
### 关于dva框架
dva是基于 redux、redux-saga 和 react-router 的轻量级前端框架。
请参考[dva Github](https://github.com/dvajs/dva),相关问题可以在[dva Github issues](https://github.com/dvajs/dva/issues)咨询
### 关于webpack
用于构建/打包前端工程,本项目采用全新webpack v4.28.x,其中包含全新的特性/性能优化/社区最佳实践
请参考[webpack](https://webpack.js.org)
### 关于Create React App
本项目是基于Create React App脚手架创建,并执行了`yarn eject`命令
请参考[Create React App](https://github.com/facebook/create-react-app).
## 使用
下面是关于本项目的使用说明
### 环境变量
* node.js: v10.x or v8.x(>= v8.10)
> 关于node.js请参考: [https://nodejs.org/en/](https://nodejs.org/en/)
* yarn: 推荐使用yarn管理本项目
> 执行如下命令全局安装yarn
> ```
> $ npm install --global yarn
> ```
>
> 关于`yarn`请参考 [https://yarnpkg.com](https://yarnpkg.com)
* lerna: 用于管理具有多个`package`的`JavaScript`项目的工具。
> A tool for managing JavaScript projects with multiple packages.
> 执行如下命令全局安装
> ```
> $ npm install --global lerna
> ```
>
> 关于`lerna`请参考[https://lernajs.io/](https://lernajs.io/)
* 开发工具: 推荐使用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
### 安装runtime
执行如下命令
```
$ npm install hzero-front-runtime --registry=http://nexus.saas.hand-china.com/content/groups/hzero-npm-group/
```
或者
```
$ yarn add hzero-front-runtime --registry=http://nexus.saas.hand-china.com/content/groups/hzero-npm-group/
```
### 下载/Clone
您可以使用如下命令下载本项目
```shell
git clone https://code.choerodon.com.cn/hzero-hzero/hzero-front-runtime.git
cd hzero-front-runtime
```
**本项目依赖于`packages`,需要默认安装`HZero Front`才能执行如下操作**
### 初始化项目
执行如下命令
```shell
$ yarn
```
若安装了`packages`,则执行如下命令
```
$ lerna bootstrap
```
`build dll`: 本项目开启`webpack dll`插件,所以在执行`启动/build`操作之前,`请务必执行如下命令`
```shell
$ yarn dll
```
### 使用子模块
由于在项目中使用了 git submodule 进行子模块管理,需要在首次拉取代码后进行初始化操作。
```shell
git submodule update --init --recursive
```
### 启动项目/开发者模式
在执行完`build dll`操作之后,执行如下命令
```shell
$ yarn start
```
```shell
cross-env BASE_PATH=/ CLIENT_ID=localhost BPM_HOST=http://192.168.12.103:8330 API_HOST=http://hzeronb.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 地址
启动成功后,请访问如下地址即可
```url
http://localhost:8000
```
### 构建
在执行完`build dll`操作之后,执行如下命令即可构建用于生产环境的项目
```shell
$ yarn build
```
最终静态文件会生成至如下目录
```shell
/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 生效,如下:
```shell
RUN sed -i 's/\#gzip/gzip/g' /etc/nginx/nginx.conf;
```
如需关闭 gzip,将该行注释即可。
### lerna的用法
执行如下命令即可创建/管理packages
#### 初始化项目
```
$ lerna init
```
#### 安装packages和主体项目依赖
```
$ lerna bootstrap
```
#### 运行子项目/主体脚本
```
$ lerna run [script]
```
#### 导入package
```
$ lerna import <pathToRepo>
```
#### 创建package
```
$ lerna create <package name> packages
```
### 更多可执行脚本
* `precommit`: 执行`git commit`操作之前做`lint-staged`代码检查
* `lint`: 执行`eslint`代码检查和`stylelint`样式检查
* `lint:fix`: 执行`eslint`代码检查并修复和`stylelint`样式检查并修复
* `lint-staged`: 执行`lint-staged`代码检查
* `lint-staged:js`: 执行`eslint` `JavaScript`代码检查
* `lint:style`: 执行`stylelint`样式检查并修复
* `test`: 执行单元测试命令
* `changelog`: 执行变更日志CHANGELOG.md文件生成
* `prettier`: 执行`prettier`用于美化代码
* `tree`: 查看项目目录结构,该命令windows系统支持有限
## 项目目录
```shell
.
├── CHANGELOG.md // �
没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
HZERO应用微服务、容器、DevOps等云原生技术,封装了大量技术开发包、技术应用组件、技术场景实现能力,并支持SaaS模式应用,提供了一个可支持企业各业务系统或产品快速开发实现的微服务应用数字化融合平台,富含各类开箱即用的组件G-General、A-AI、B-BigData、M-Mobile、D-DevOps,助力企业跨越Cloud(IaaS/PaaS)与自身数字化的鸿沟,共享业务服务的组合重用,为企业服务化中台整合、数字化转型提供强力支撑,也为企业提供了最佳架构实践。
资源推荐
资源详情
资源评论
收起资源包目录
HZERO-基于微服务架构开源免费的企业级PaaS平台
(2000个子文件)
style.css 44KB
iconfont.css 24KB
styles.css 11KB
iconfont.css 8KB
content.min.css 4KB
index.css 939B
index.css 878B
index.css 878B
index.css 742B
index.css 321B
index.css 321B
index.css 321B
index.js 62KB
index.js 57KB
index.js 55KB
index.js 52KB
index.js 44KB
index.js 43KB
index.js 41KB
DraftDS.js 41KB
index.js 41KB
index.js 40KB
index.js 38KB
index.js 37KB
index.js 35KB
global.js 35KB
index.js 33KB
index.js 32KB
index.js 32KB
trRoleManagement.js 32KB
index.js 31KB
index.js 31KB
index.js 30KB
Editor.js 30KB
index.js 30KB
index.js 30KB
index.js 29KB
LovModal.js 29KB
index.js 29KB
CodeRuleDetail.js 28KB
CodeRuleDetail.js 28KB
index.js 28KB
index.js 28KB
index.js 28KB
index.js 28KB
trRoleManagementService.js 27KB
index.js 27KB
serviceLang.js 27KB
basic.js 26KB
labelTemplateDS.js 26KB
index.js 25KB
servicesService.js 25KB
index.js 25KB
index.js 24KB
tree.js 24KB
index.js 24KB
index.js 24KB
index.js 24KB
Detail.js 23KB
userInfo.js 23KB
internationalization.js 23KB
index.js 23KB
Modal.js 23KB
index.js 22KB
index.js 22KB
index.js 22KB
menuTab.js 21KB
Drawer.js 21KB
EditModal.js 21KB
index.js 21KB
index.js 21KB
SortableContainer.js 20KB
util.js 20KB
LegalForm.js 20KB
LayoutCommon.js 20KB
Drawer.js 20KB
MemberDrawer.js 20KB
CustModal.js 20KB
FieldEditor.js 20KB
validation.js 19KB
Drawer.js 19KB
EditModal.js 19KB
index.js 19KB
Form.js 19KB
index.js 19KB
AssignRoleModal.js 19KB
index.js 19KB
interfaceDS.js 19KB
index.js 19KB
List.js 19KB
index.js 19KB
EditModal.js 19KB
index.js 19KB
index.js 18KB
CustModal.js 18KB
RoleDrawer.js 18KB
index.js 18KB
FilterForm.js 18KB
AuthDetail.js 18KB
index.js 18KB
共 2000 条
- 1
- 2
- 3
- 4
- 5
- 6
- 20
资源评论
- Mped242024-03-19资源很受用,资源主总结的很全面,内容与描述一致,解决了我当下的问题。
Java程序员-张凯
- 粉丝: 1w+
- 资源: 6656
下载权益
C知道特权
VIP文章
课程特权
开通VIP
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功