This package has been deprecated

Author message:

public error package

germa-pc

项目说明

此项目是利维坦的组建库

项目使用 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 文档

启动项目

使用 webpack-server 启动项目：

yarn start # 当前项目有许多文件是从 antd 拷贝出来，eslint 无法通过检查，所以此条命令会不通过 
# 或 
nolint=1 yarn start # 添加 nolint=1 前缀，会以忽略 eslint 检查进行 webpack 的执行 

编译项目

编译项目即把项目文档编译至项目根路径的 build 目录

$ yarn build
# 或 
$ nolint=1 yarn build # 忽略 eslint 检查 

如果要在本地服务查看 build

$ npm i -g http-server
$ http-server build

组件库编译

组件库编译是指 将项目中的 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 目录

测试

yarn test

测试文件请编写在项目根目录的 tests 文件夹中，当前组件库有许多还不能通过测试

发布 npm

发布之前请先确保 nrm 指向 ircloud

$ nrm use ircloud
# 如果第一次使用 ircloud npm 请先登陆： 
$ npm login # 输入账号：ircloud 密码：ircloud-77 邮箱: [e-mail] 

在使用了 yarn lib 命令编译之后，进入 dist 目录执行 npm 部署命令：

$ cd dist
$ npm publish --access public

部署至 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 是无法通过的，在项目规整代码之前，请自行执行以下命令部署

$ nolint=1 yarn build
$ bash scripts/deploy.sh root@192.168.1.194 deploy

bash 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

部署回滚

由于每次部署都设定了版本号，所以在我们可以进行回滚

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 目录