hzero-front-runtime v1.0.7
title: hzero-front-runtime date: 2019-03-01 tag: HZero react dva webpack runtime lerna package yarn
version: 1.0.4
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.comlerna: 用于管理具有多个
package的JavaScript项目的工具。A tool for managing JavaScript projects with multiple packages. 执行如下命令全局安装
$ npm install --global lerna关于
lerna请参考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
安装依赖
执行如下命令
$ 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
下载/Clone本项目
您可以使用如下命令下载本项目
$ git clone https://code.choerodon.com.cn/hzero-hzero/hzero-front-runtime.git
$ cd hzero-front-runtime本项目依赖于packages,需要默认安装HZero Front才能执行如下操作
初始化项目
执行如下命令
$ yarn 在开发模式下,可以执行如下命令可以跳过puppeteer安装过程中下载Chromium
$ export PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1 #macos/linux # set PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1 #windows
若安装了packages,则执行如下命令
$ lerna bootstrapbuild dll: 本项目开启webpack dll插件,所以在执行启动/build操作之前,请务必执行如下命令
$ yarn build:dll使用子模块
若在项目中使用了 git submodule 进行子模块管理，需要在首次拉取代码后进行初始化操作。
$ git submodule update --init --recursive启动项目/开发者模式
在执行完build dll操作之后,执行如下命令
$ yarn startcross-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构建
在执行完build dll操作之后,执行如下命令即可构建用于生产环境的项目
$ yarn build最终静态文件会生成至如下目录
/distbuild 会设置几个环境变量, 您可以改变他们来适应自己的项目。
变量名及含义如下表所示：
| 变量名 | 含义 | 构建后需要替换 |
|---|---|---|
| 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，将该行注释即可。
lerna的用法
执行如下命令即可创建/管理packages
初始化项目
$ lerna init安装packages和主体项目依赖
$ lerna bootstrap运行子项目/主体脚本
$ lerna run [script]导入package
$ lerna import <pathToRepo>创建package
$ lerna create <package name> packages项目目录
.
├── CHANGELOG.md
├── README.md
├── config
│ ├── alias.js
│ ├── env.js
│ ├── jest
│ │ ├── cssTransform.js
│ │ └── fileTransform.js
│ ├── paths.js
│ ├── routers.js
│ ├── theme.js
│ ├── webpack.config.js
│ ├── webpack.dll.config.js
│ └── webpackDevServer.config.js
├── jsconfig.json
├── mock
│ └── index.js
├── package.json
├── public
│ ├── error.html
│ ├── favicon.ico
│ ├── favicon.png
│ ├── hzero-logo.svg
│ ├── images
│ │ ├── bells.svg
│ │ ├── browser-chrome.png
│ │ ├── browser-edge.jpeg
│ │ ├── browser-firefox.png
│ │ ├── browser-ie11.png
│ │ ├── browser.jpg
│ │ ├── ic-card-sample-number.svg
│ │ ├── ic-card-sample-project-list.svg
│ │ ├── ic-card-sample-report.svg
│ │ ├── ic-card-sample-sprint-overview.svg
│ │ ├── ic-card-sample-tasklist.svg
│ │ ├── icon-error.png
│ │ ├── illustrate-category.png
│ │ └── life-config-delete.png
│ ├── index.html
│ ├── lib
│ │ ├── es6-sham.min.js
│ │ ├── es6-shim.min.js
│ │ └── tinymce
│ ├── manifest.json
│ └── suggestBrowser.html
├── scripts
│ ├── build.js
│ ├── start.js
│ └── test.js
├── src
│ ├── index.js
│ ├── index.less
│ ├── models
│ │ └── global.js
│ ├── router.js
│ ├── routes
│ │ └── index.js
│ ├── serviceWorker.js
│ ├── setupProxy.js
│ └── utils
│ └── router.js
└── yarn.lockAuthor
@中台技术中心·HZero技术团队
Contributing
使用与开发指引
发布
将本项目发布到nexus npm私有源仓库
生成 auth hash
执行如下命令
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使用规范
Clone
git clone https://code.choerodon.com.cn/hzero-hzero/hzero-front-runtime.git
cd hzero-front-runtimeGit global setup
git config --global user.name "yourname"
git config --global user.email "youremail@hand-china.com"Commit & push
git add yourfile
git commit -m "your commit message"
git push -u origin masterCommit guide
本项目采用如下规则
[操作][:][空格][commit内容][commit内容]请详细填写具体的文件新增/修改/删除操作过程
例如
fix: 修复查询功能bug- 操作标识符
fix：修复bug
feat：更新/新增文件/新特性
modify：重命名
delete：删除文件
docs: 文档调整补充patches:
$ git commit -a -m "fix(parsing): fixed a bug in our parser"features:
$ git commit -a -m "feat(parser): we now have a parser \o/"breaking changes:
$ git commit -a -m "feat(new-parser): introduces a new parsing library
BREAKING CHANGE: new library does not support foo-construct"other changes:
You decide, e.g., docs, chore, etc.
$ git commit -a -m "docs: fixed up the docs a bit"4 years ago