04.Element UI 项目工程化剖析之发布部署、持续集成

1,177 阅读4分钟

0x.00 📢 前言

本文将介绍项目的发布部署、持续集成。

项目工程化系列文章主要通过解析element项目源码,从结构、功能、源码方面逐一解析,学习其模块化、组件化、规范化、自动化等多维度优秀实践。主要内容包含项目结构、npm script、项目构建、文档解析、打包配置、发布部署等。

👇 项目工程化系列文章链接如下,推荐按照顺序阅读文章 👇。

1️⃣ 工程化剖析:项目概览、package.json、npm script
2️⃣ 工程化剖析:项目构建、MD解析
3️⃣ 工程化剖析:打包配置
4️⃣ 工程化剖析:发布部署、持续集成
5️⃣ 工程化剖析:主题构建、自动化测试、代码质量检查、类型声明
6️⃣ 工程化剖析:项目网站
7️⃣ 工程化剖析:命令之图解

本专栏的 gitbook 版本地址已经发布 📚《learning element-ui》 ,内容同步更新中!


0x.01 🚀 发布部署

执行命令 npm run pub 实现发布部署流程:

  • 本地代码检查合并,push到远程分支;
  • 组件构建发布(npm pulish);
  • 官网发布部署。

接下来详细介绍各 shell 脚本功能。

build/git-release.sh

检查本地代码 dev 分支是否与线上分支存在冲突。

image.png

build/release.sh

主要作用代码分支合并push远程分支、版本号确认更新、组件主题发布(npm pulish)。

  1. 合并 dev 分支到 master
  2. 通过 select-version-cli 确认发布版本号。
  3. 执行命令 npm run dist 打包构建组件。
  4. 运行ssr测试 node test/ssr/require.test.js
  5. 发布主题,更新版本号,与组件库保持一致。
  6. 提交代码并更新package.json中的版本号 。
  7. master 和 dev 分支push 到远程分支。
  8. 发布组件。

carbon (92).png

select-version-cli 提供选择发布版本选择。

image.png

选择确认后,继续执行 release.sh 执行发布部署流程。

image.png

🚧 build/deploy-faas.sh

网站发布部署, 用于faas deploy 配置。在2.15版本之后移除了pub命令 sh build/deploy-faas.sh调用,集成至CI,详见build/deploy-ci.sh

carbon (93).png

0x.02 持续集成

持续集成(Continuous Integration,简称 CI)指的是只要代码有变更,就自动运行构建和测试,反馈运行结果。确保符合预期以后,再将新代码"集成"到主干。持续集成的好处在于,每次代码的小幅变更,就能看到运行结果,从而不断累积小的变更,而不是在开发周期结束时,一下子合并一大块代码。

.travis.yml

使用Travis CI 提供的是持续集成服务,项目的根目录下面必须有一个.travis.yml文件。这是配置文件,指定了 Travis 的行为。该文件必须保存在 Github 仓库里面,一旦代码仓库有新的 Commit,Travis 就会去找这个文件,执行里面的命令(执行测试、构建、部署等操作)。

image.png

build/deploy-ci.sh

主要作用构建发行版本和开发版本内容。

  1. git config定义user.name和user.email。
  2. 发行版本构建(组件库、主题theme-chalk、项目网站)、打新标签。
  3. 开发分支的 主题theme-chalk、项目网构建提交到master分支。

carbon (43).png

0x.03 makefile

makefile带来的好处就是自动化构建,一旦写好,只需要一个make命令,整个工程完全自动化,极大的提高了软件开发的效率。

在软件开发中,make 是一个工具程序(Utility software),经由读取叫做 makefile 的文件,自动化建构软件。它是一种转化文件形式的工具,转换的目标称为 target ;与此同时,它也检查文件的依赖关系,如果需要的话,它会调用一些外部软件来完成任务。它使用叫做 makefile 的文件来确定一个 target 文件的依赖关系,然后把生成这个 target 的相关命令传给 shell 去执行。

mac/linux 中直接可以执行 make 命令的(terminal bash)。 Windows下载 make 的 GUN 工具Make for Windows

配置环境变量 Win

右键我的电脑->属性->高级->环境变量->系统变量->变量path,然后在path中新建环境变量,目录定位到make for windows安装目录(默认路径 C:\Program Files (x86)\GnuWin32\bin\ )即可。

若目录下没有 makefile,执行显示“没有指明目标并且找不到makefile ”,终止命令。

image.png

执行 make 命令可以看到详细的使用说明。

image.png

执行 make target 命令后,找到 target 对应的 commonds并执行。 查看源文件,每个commonds都是npm script,具体功能详见前文。(make help 输出文本存在转义字符,win系统无法支持)

carbon (44).png

📚参考&关联阅读

travis_ci,阮一峰
Make 自动化构建分析

关注专栏

如果本文对您有所帮助请关注➕、 点赞👍、 收藏⭐!您的认可就是对我的最大支持!

此文章已收录到专栏中 👇,可以直接关注。