第10期 - 故宫冰面湖

封面图来源于故宫外的冰面湖,冬天的北京在阳光的照射下显得格外的耀眼。

技术分享-前端工程化相关

自动化构建流程

打包构建 - git flow(分支管理) - CI CD(webhook)

持续集成 CI

持续集成是指频繁地将代码变更集成到共享存储库中,以便及早发现问题并防止集成时出现意外。可以使用如 Jenkins、Travis CI或CircleCI来实现。这些工具可以持续监视存储库的变化,并在推送新代码时触发自动构建和测试

持续交付 CD

持续交付则是自动化交付过程,确保您的前端应用程序随时可以部署到不同的环境中。可以设置部署流水线,使用工具如Ansible、Docker或Kubernetes来自动将代码更改推送到各种环境中

git flow 工作流

一种替代的 Git 分支模型,它涉及使用功能分支和多个主要分支。开发人员创建一个功能分支,并延迟将其合并到主干分支,直到功能完成。 使用专用分支来准备版本, 从 develop 创建 release 分支将启动下一个发布周期(release 分支基于 develop 分支), 准备好交付后 release 分支将被合并并 main 标记版本号。一旦该版本准备好发布,它将被合并到 main 和 develop(当前的开发版本,实际上 是更新最新的main分支) 中,然后该 release 分支将被删除

自动化构建过程

自动化构建工具如Webpack或Gulp可以帮助您将源代码转换为优化的、适合生产环境的资产。它们可以处理诸如打包、缩小文件大小,甚至将Sass文件转换为普通的CSS等任务。

通过使用Git Flow进行版本控制、持续集成和持续交付,以及自动化构建工具,可以构建一个前端项目流水线

Gitlab Runner

Pipeline - 管道

一次Pipeline其实相当于一次构建任务,里面可以包含多个流程,如安装依赖、运行测试、编译、部署测试服务器、部署生产服务器等流程。任何提交或者merge request的合并都可以触发Pipeline

.yml 文件配置

Stages 表示构建阶段,一次Pipeline中可以定义多个Stages.所有Stages会安装顺序运行,即当一个Stage完成后,下一个Stage才可以开始.所有Stages完成后,Pipeline才会成功, 只要有一个失败,后续的Stages就不会再执行,整个Pipeline失败 文件推送到远程gitlab的project中,就会触发pipeline了。执行结果可以在project->CI/CD->Pipelines中查看

Jobs - 构建的工作

表示某个Stage里面执行的工作, Stages里面定义多个Jobs, 相同Stage中的Jobs会并行执行, 相同Stage中的Jobs都执行成功,该Stage才会成功, 只要有一个Job失败,那么Stage失败,整个Pipeline失败

Webhook

Webhook 是一种通过 HTTP 协议实现的回调机制,用于实现应用程序之间的实时通知和数据传输。 当特定事件发生时,一个应用程序会向另一个应用程序发送 HTTP POST 请求,将相关数据传递给另一个应用程序。通常用于实现事件驱动的自动化工作流,比如在某个事件发生时触发数据处理、通知或其他操作。

当开发人员向版本控制系统提交代码时,Webhook 可以触发自动构建流程,将新代码自动集成到项目中。构建完成后,构建工具可以通过 Webhook 向团队成员发送构建状态通知,比如构建成功或失败的信息。构建成功后,Webhook 可以自动触发部署流程,将新版本的软件部署到测试环境或生产环境。还可以用于将持续集成的状态信息集成到团队的即时通讯工具或监控系统中。

维基百科:通过自定义回调函数来增加或更改网页表现的方法.通常被某些事件激活,比如将代码推送到源[3]或评论博客。[4]当此事件发生时,原网站将向为网络钩子配置的URL发送HTTP请求。用户可配置它们引发网页上的事件以调用另一个网站的行为

资料参考: https://www.atlassian.com/git/tutorials/comparing-workflows/gitflow-workflow
https://zhuanlan.zhihu.com/p/562224062
https://en.wikipedia.org/wiki/Webhook

nodejs

Node.js的EventEmitter事件机制机制

EventEmitter 是 Node.js 的核心模块之一,它实现了事件驱动的非阻塞 I/O 机制

通过这种事件机制,Node.js 可以实现非阻塞的异步编程模型,允许同时处理多个操作,从而提高了程序的性能和并发性能。处理文件操作、网络请求等。非阻塞的事件驱动机制是 Node.js 在实现高性能服务器端应用和实时应用(如聊天应用)时的关键。

Node.js 运行在服务器端,可以用于构建服务器端应用、后端 API、命令行工具 原生 JavaScript 主要运行在浏览器端,用于操作 DOM、响应用户交互、构建前端应用

Node.js 使用 CommonJS 模块系统,支持模块的导入(require)和导出(module.exports)。 JavaScript 在浏览器中使用 ES6 模块系统,支持 import 和 export 关键字。

Node.js 提供了文件系统(fs 模块)来处理文件操作,如读取、写入、删除等。 JavaScript 通过浏览器的 Web APIs 提供了类似功能,例如使用 FileReader 进行文件读取。

都支持异步 Node.js 鼓励使用回调函数、Promise、async/await 等方式来处理异步操作,以保持高性能的同时处理大量并发请求。 原生 JavaScript 也支持异步编程,使用 Promise、async/await 等语法。