test-g-pc v0.2.126
项目说明
此项目是利维坦的组建库
项目使用 make-react-npm 的脚手架进行创建
make-react-npm 组件的git仓库：https://github.com/ymzuiku/make-react-npm
make-react-npm 组件的npm仓库：http://47.107.150.36:4873/#/detail/make-react-npm
make-react-npm 用于生成组建项目或业务项目的脚手架
生成的项目仅是在 create-react-app 基础上，添加了一些 babel 和 webpack 插件的项目
项目结构和 create-react-app 保持一致
使用 hobbes-ui-kit 做为文档的基础编写组件
hobbes-ui-kit 是用于编写组件文档相关的基础组件
hobbes-ui-kit 组件的git仓库：https://gitlab.dinghuo123.com/FET/hobbes-ui-kit
hobbes-ui-kit 组件的npm仓库：http://47.107.150.36:4873/#/detail/hobbes-ui-kit
hobbes-ui-kit 组件的文档： http://hobbes.yyframe.com
包含：
- 一个兼容移动端的响应布局
- 内置一些常用组件，如
HBLayout、HBMenu、HBButton 等等 - 内置
HBMdx组件用于读取mdx文件进行编写文档 (如此文档) - 内置
HBLiveEditor组件用于实时编辑和渲染组件 - 内置
HBAutoAPITable组件用于读取组建对象生成 API 表格 - 内置
HBAutoShowcase组件用于读取组建对象渲染可交互设定 props 的工具
一些写组件文档常用到的组件：
// 根据 code 字符串渲染 React 组件
const scope = { HBSwitch };
const code = `<HBSwitch radius="0.3em" />`;
render(<HBLiveEditor code={code} scope={scope} />)// 生成 API 表格
<HBAutoPropsAPITable componentTarget={HBSwitch} />// 生成可交互设定 props 的工具
<HBAutoPropsShowcase componentTarget={HBSwitch} />具体使用请看 hobbes-ui-kit 文档
1.测试
yarn test测试文件请编写在项目根目录的 tests 文件夹中，当前组件库有许多还不能通过测试
2.启动项目
使用 webpack-server 启动项目：
yarn start # 当前项目有许多文件是从 antd 拷贝出来，开发过程 ESLint 暂时关闭1.编译组件库
编译组件库是指 将项目中的 components 中的组件编译成可发布至 npm 的包
$ yarn lib此命令做了以下事务：
- 在项目根路径创建了 dist 目录，如果已有该目录会清空内容
- 将 package.json 版本提升一个最小版本, 如 1.2.3 -> 1.2.4
- 将 package.json 中的 private 属性改为 false
- 将 package.json 中的对于发包不需要的属性清空
- 将 package.json 及 README.md 拷贝至 dist 目录
- 将 项目编译至 dist 目录
.发布 npm
发布之前请先确保 nrm 指向 ircloud
$ nrm use ircloud
# 如果第一次使用 ircloud npm 请先登陆：
$ npm login # 输入账号：ircloud 密码：ircloud-77 邮箱: ircloud@77ircoud.com在使用了 yarn lib 命令编译之后，进入 dist 目录执行 npm 部署命令：
$ ESLINT=false yarn lib # 1.编译组库至 dist macbook 上 用 ESLINT=false yarn mac-lib
$ cd dist # 2.进入编译生成的 dist 目录
$ npm publish --access public # 3.部署至 npm（请确保 nrm 指向 ircloud）1.编译项目文档
编译项目文档 即把项目文档编译至项目根路径的 build 目录
$ yarn build
# 或
$ ESLINT=false yarn build # 忽略 eslint 检查如果要在本地服务查看 build
$ npm i -g http-server
$ http-server build2.部署项目文档
部署项目文档是指将项目的演示文档部署至 http://germa-pc.yyframe.com
部署之前我们需要先将配置本地ssh密钥至服务器
网上有许多ssh密钥配置的参考：
- https://blog.csdn.net/nahancy/article/details/79059135
- http://www.runoob.com/w3cnote/set-ssh-login-key.html
yarn deploy以上命令做了：
- 测试
yarn test --ci - 编译
yarn build - 部署
bash scripts/deploy.sh root@192.168.1.194 deploy
前面说到，由于项目现在不能通过 eslint 检测，所以 yarn deploy 是无法通过的，在项目规整代码之前，请自行执行以下命令部署
$ ESLINT=false yarn build
$ bash scripts/deploy.sh root@192.168.1.194 deploybash scripts/deploy.sh root@192.168.1.194 deploy 命令执行了以下事务：
- 读取 package.json 中的版本号，用于设定部署版本
- 使用本地ssh密钥
~/.ssh/id_rsa进行登陆 root@192.168.1.194 - 将本地 build 文件同步至 root@192.168.1.194:/www/germa-pc-backup/germa-pc-版本号
- 将本地测试覆盖率的文件夹(当前项目无法通过测试所以无此文件夹)同步至 root@192.168.1.194:/www/germa-pc-test-backup/germa-pc-test-版本号
- 将服务器中的 /www/germa-pc-backup/germa-pc-当前版本号 替换 /www/germa-pc目录
- 将服务器中的 /www/germa-pc-test-backup/germa-pc-test-当前版本号 替换 /www/germa-pc-test 目录
- 由于服务器上设置了针对目录的nginx反向代理，并且域名做了泛解析，所以可以访问以下路径进行文档的访问：
- germa-pc.yyframe.com 指向 root@192.168.1.194:/www/germa-pc
- germa-pc-test.yyframe.com 指向 root@192.168.1.194:/www/germa-pc-test
3.部署回滚
由于每次部署都设定了版本号，所以在我们可以进行回滚
yarn rollback 历史部署过的版本号yarn rollback 做了以下事务：
- 使用本地ssh密钥
~/.ssh/id_rsa进行登陆 root@192.168.1.194 - 将服务器中的 /www/germa-pc-backup/germa-pc-回滚的版本号 替换 /www/germa-pc目录
- 将服务器中的 /www/germa-pc-test-backup/germa-pc-test-回滚的版本号 替换 /www/germa-pc-test 目录