Skip to content

Latest commit

 

History

History
executable file
·
258 lines (167 loc) · 8.55 KB

开发、发布流程.md

File metadata and controls

executable file
·
258 lines (167 loc) · 8.55 KB
Raw

简介

本项目代码是在element-ui基础上进行的二次开发，如果有必要会从element-ui中同步代码过来。element-ui 现在处于维护阶段，为了支持Vue 3.0，element-ui 进行了重写，因为Vue 3.0和 Vue 2.0差别比较大所以又建立一个项目。

分为开发流程和发布流程两大块。

注意：因为本项目的npm包的名字修改为@shinhotech/sh-ui，代码内部的名字替换为@shinhotech/sh-ui；组件的名字还是为el-***格式。

文档列表如下：

开发流程

开发流程大致包含了：

  • 代码获取
  • 分支使用
  • 本地开发
  • 代码审核

获取代码

代码地址在github上，源代码是从element代码中fork过来的，通过git 获取代码。

git clone https://github.com/shinhotech/element.git

分支使用

项目主要的大致有以下几个：

  • master分支 为了提供稳定可行的版本，不能开发代码
  • dev分支用于协同开发功能
  • docs分支用于发布文档
  • 本地dev分支，如果本地开发代码不要再dev分支上直接提交
  • release分支 用于发布npm包、github包

本地开发

获取代码后进行本地的开发和调试，本地开发要创建本地分支、安装依赖包、运行调试命令等等操作。

# 安装依赖包
npm i or yarn add or cnpm i

# 创建自己本地开发分支并且保证自己的代码是最新的

git branch develop
git checkout develop
git fetch origin dev

# 运行代码
npm run dev or yarn dev

运行代码后就可以修改src和package中的文件夹，其他的文件夹尽量不要修改。

如果不了解本项目的目录和作用请查看项目明细文档。

本地开发时要符合开发规范，可以参考开发规范文档。主要注意几个点：

  • 要写主流程的单元测试
  • 补充国际化的文本（中文、英文）
  • 补充无障碍阅读代码

单元测试

开发完成功能就要在test文件夹中添加新的单元测试，本项目的单元测试采用的框架是karma来编写的，不过不太清楚karam可以去官网查看一下。

编写完成单元测试运行单元测试命令，一定要保证新编写的单元测试通过。

# 运行单元测试
npm run test or npm run test:watch

单元测试全部通过才把本地develop分支合并到dev分支。

文档编写

因为文档是部署在本项目的github-pages上，所以又创建了一个docs分支来储存文档源码。

既可以在本地develop分支上编写文档也可以再docs分支上进行编写文档，还是建议在本地develop分支上编写文档。这样可以保证文档打包的时候package的包是最新的。

element-ui项目本身就是包含了国际化的，所以文档也是按照语言大致分为了英语、中文、西班牙语等等，@shinhotech/sh-ui本项目主要维护英语、中文。

# 切换本地分支
git checkout develop
# 运行代码
npm run dev or yarn dev

npm run dev会打开默认打开一个localhost:8085的浏览器窗口，这个窗口是和element-ui官方文档一样的文档页面，这个文档中的组件是引用的package中的组件。可以保证本地的调试。

文档的源码在项目examples文件夹 》 docs 文件夹下根据语言缩写分为四个文件夹分别是en-US、en、zh-CN、fr-FR，修改中文就修改zh-CN文件夹中组件名字的md文件。

代码审核

在完成本地代码开发和单元测试后，对代码的质量大致有以下几个要求：

  • 冒烟测试：自己进行冒烟测试，保证主流程是完整可用(运行单元测试命令，如果单元测试的测试用例全过就表示完成冒烟测试)。
  • 功能测试：自己可以在本地的开发环境进行自测。
  • codeReview: 上面两步都通过后，发起邮件邀请各位组长进行codeReview.

上面三个步骤都通过了，才能进行npm包的发布。

发布流程

在完成上述的开发流程后，要进行npm package 或者 github package发布和docs 发布。

  • package发布
  • docs发布
  • git操作

package发布

package发布分为 npm package 、github package 两个 npm 管理平台。github package名字必须要加上所属的组织。

在发布npm包之前要编写changelog，changelog有始四种语言的，分别为en-US、en、zh-CN、fr-FR，还是主要维护en、zh-CN中的版本变更信息。

修改完成changelog就要修改四个文件下的版本号信息。假如从 2.14.2变更为2.15.0。

因为在发布npm package或者github package的时候要遵循npm 包发布的规则。

major：主版本号

minor：次版本号

patch：补丁号

修改src/index.js中的代码如下：

  export default {
    // 省略
    version: '2.15.0' // 从 2.14.2 修改为 2.15.0
    // 省略
  }

根目录下package.json中的代码如下：

package.json中的版本号也可以通过命令生成

  {
    // 省略
    "version": "2.15.0" // 从 2.14.2 修改为 2.15.0 
    // 省略
  }

还要修改examples/version.json中的代码如下：

{"1.4.13":"1.4","2.0.11":"2.0","2.1.0":"2.1","2.2.2":"2.2","2.3.9":"2.3","2.4.11":"2.4","2.5.4":"2.5","2.6.3":"2.6","2.7.2":"2.7","2.8.2":"2.8","2.9.2":"2.9","2.10.1":"2.10","2.11.1":"2.11","2.12.0":"2.12","2.13.2":"2.13","2.14.2":"2.14"}

// 修改为

{"1.4.13":"1.4","2.0.11":"2.0","2.1.0":"2.1","2.2.2":"2.2","2.3.9":"2.3","2.4.11":"2.4","2.5.4":"2.5","2.6.3":"2.6","2.7.2":"2.7","2.8.2":"2.8","2.9.2":"2.9","2.10.1":"2.10","2.11.1":"2.11","2.12.0":"2.12","2.13.2":"2.13","2.14.2":"2.14","2.15.0":"2.15"}

// 新增了 2.15.0

修改packages/theme-chalk/package.json中的代码：

  {
    // 省略
    "version": "2.15.0" // 从 2.14.2 修改为 2.15.0 
    // 省略
  }

要让上面的四个文件中的版本号保持一致。

npm package发布

完成上述操作后，进行打包发布到npm官方平台或者github 平台进行托管。

修改根目录下的package.json中的代码如下：

  "repository": {
    "type": "git",
    "url": "https://github.com/shinhotech/element.git"
  }
  // 下方代码删除
  // "publishConfig": {
  //   "registry": "https://npm.pkg.github.com/shinhotech"
  // }

在项目根目录下运行命令：

npm login or npm login --registry="xxxxxxx" 
# 可以登录官方平台或者私服 可以通过 --registry 指定登录地址
# 输入用户名密码

# 执行打包命令
npm run dist

# 发布到登录的平台
npm publish

发布完成一定记得自己npm install 测试一下自己发布的包是否正确发布。

github package发布

github package与npm package包不同的地方，因为github 要求发布的package的名字中必须要包含一个组织，例如当前项目的名字就要是@shinhotech/@shinhotech/sh-ui,而 npm官方的就可以是@shinhotech/sh-ui这样命名。

还有一些github上面增加一些配置，本项目中这些配置已经增加了。

在运行命令如下：

npm login --registry=https://npm.pkg.github.com
> Username: USERNAME
> Password: TOKEN
> Email: PUBLIC-EMAIL-ADDRESS

# 再运行一个大包命令
npm run dist

# 发布到github npm 平台
npm publish --access=public

如果要安装github npm平台上的包，就要通过--registry="https://npm.pkg.github.com" 来指定从github npm平台上获取package。

发布release

可以通过npm run pub来进行 代码合并发布release包，也可以不发布，这个不影响使用。

发布文档

文档在本地develop分支完成开发，切换到docs分支，进行打包提交。github-pages会自动刷新最先的资源。对github-pages感兴趣的可以查看这个文档。 打包命令: npm run deploy:build-demo

同步信息

当经过上面步骤都通过的时候，发布npm包成功后，要和各个项目组的前端同步更新的信息，以防止出现信息不同步造成的问题。 同步方式: 发送邮件并贴上相关修改地址至 上海IT 前端开发shinhoitfront@shinho.net.cn & 上海IT 后端开发shinhoitback@shinho.net.cn；邮件内容需要描述清楚修改的相关信息。