HZERO前端工程架构是基于React的构建页面的JavaScript UI库以及轻量级前端数据模型/状态管理框架dva, 并使用webpack 4.x构建本项目,同时采用了大量工具/库以及react相关的依赖库实现相关通用功能和提供解决相关解决方案.
关于React
React是用于构建用户界面的JavaScript库,本项目采用全新的react v16.8.x,其中包含一些全新的特性.且本项目会持续同步react版本.
更多请参考React Github或React官网
关于dva框架
dva是基于 redux、redux-saga 和 react-router 的轻量级前端框架。
请参考dva Github，相关问题可以在dva Github issues咨询
关于webpack
用于构建/打包前端工程,HZERO前端工程架构采用全新webpack v4.x,其中包含全新的特性/性能优化/社区最佳实践
请参考webpack
关于Create React App
HZERO前端工程架构是基于Create React App脚手架创建,并执行了yarn eject命令
请参考Create React App.
主要结构
- hzero前端主体项目(包含各主要功能模块
pakcages):hzero-front/hzero-front-*(packages)
项目仓库
Gitlab: https://code.choerodon.com.cn/hzero-hzero/hzero-front
- hzero前端项目运行时:
hzero-front-runtime
项目仓库
Gitlab: https://code.choerodon.com.cn/hzero-hzero/hzero-front-runtime
- hzero前端项目客户端工具(可用于创建/更新等基于hzero-front的前端项目):
hzero-front-cli
项目仓库
Gitlab: https://code.choerodon.com.cn/hzero-hzero/hzero-front-cli
环境变量
-
node.js: v10.x or v8.x(>= v8.10)
关于node.js请参考: https://nodejs.org/en/
-
内存:
- 开发者模式运行内存: >4GB
- 生产环境编译运行内存: >4GB
-
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/ -
开发工具: 推荐使用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
更多
下面将会对如下工具/运行时做说明