我是天元，立志做1000个有趣的项目的前端，公众号：前端cssandjs

如果你喜欢的话，请点赞，收藏，转发。

蛮荒时代

快看，这个男人叫小帅，他进了一家只有4个人的信息高科技有限公司，还妄想改变世界。

前端只有一个人，所谓的发版，就是直接本地打包，然后代码通过ftp工具扔到服务器上，代码能跑就行。

农耕时代

这种不靠谱的开发模式进行了一段时间，直到某一天，ftp把服务器搞挂了的同时，本地的文件也丢了。所以他的leader小强意识到是时候需要改变了。

首先他们开始使用了git，代码不再是只存在本地，更是存在了云端。同时新建了dev/prod/maste分支来保证相对于各个环境的独立。

在某次把dev环境代码打包上传到生产后，为了区分环境和避免再次发生这种事故，小强也开始使用了在线打包工具jenkins，

jenkins的引入也有效的避免了服务器账号外泄的风险，现在的服务器账号相对开发者是黑盒的。

手工时代

慢慢的，公司的生意做的越来越好，老板已经开始看奔驰了。

前端也从1个人加到了3个人，成立前端技术部,小帅觉得自己快要走上人生巅峰了。人加了3个，问题也越来越多。

第一个重要的问题就是，git分支总冲突。

因为以前没有制定git规范，所以大家很随意的在dev和master上开发和提交代码。

所以约定了git的相关规范，每次用feature分支作为开发分支，feature通过merge合并到dev和上线release分支。

同时使用pre-commit来规范提交的commit信息。

第二个问题，是代码风格的问题。

人多了之后，大家的代码风格不一致了。比如有的人是2空格党，有个是4空格党，有人组件用驼峰命名，有人用大驼峰。为了统一风格，于是决定使用使用统一的风格检查。

同时了为了避免一些低级的语法错误和dirty code，引入了eslint进行代码检查。

通过Prettier对代码风格进行统一和格式化，通过Husky来在提交前进行link检查。在提交后，通过github Ci来进行二次检查。

至此，在手工时代，前端团队完成了代码风格和基础的lint检查。

工业时代

老板的爸爸原来是顾总，看到儿子创业很开心，给儿子调了5个亿的现金，于是大家开始快马加鞭，突击项目。

前端人数也直接爆炸，来到了20+，各种各样的项目如火如荼的进行，于是各种解决问题的前端方案应运而生。

微前端 single spa/qiankun

20个人的开发量，在一个项目中，代码量爆炸，每次启动打包，都巨慢无比。同时，之前一些零散的项目也需要并入到这个项目中，但是目前主技术栈用的react，零散项目有个用vue，有的用angular。

为了解决这些问题，所以要开始微前端的改造。

整体项目采用了single spa，通过统一的框架底层，将各个不同的项目聚合在一起。

微前端改造后，将整体的大项目拆分成了各自独立的项目。同时各自独立的项目有自己的仓库，各自独立打包。在运行时，各独立项目的停止也不影响其他项目。

物料库

现在各个项目独立开来，拥有各自的仓库，所以每次有新模块的加入，需要新建仓库，所以模版物料应运而生。

模版物料 degit

类似Vue-cli creat-react 都有做模版物料，里面包含了一个git地址，通过git拉取模版物料。

模版物料里包含了一个项目所需的相关配置，例如打包工具，框架cli，框架主模块，eslint，prettier，示例代码等。每个项目直接进行npm安装即可开始。

我们可以使用gedit来达成此目标

npx degit [git地址]
# 例如 npx degit https://github.com/tinlee/1000-project-demo

业务组件物料 VitePress/storybook

有一些物料我们需要结合业务场景，比如省市区选择器，这种物料通常都具有统一的api，ui，可以用于多个项目的使用。在基础的ui组件的基础上，还结合了业务属性。

这类物料也需要有展示的站点，我们可以使用VitePress/storybook来展示，也可以结合类似Dumi等。这些文档工具都是支持markdown和组件的混用插入。

npm私服 Sinopia

既然相关的业务组件库已经搭建完成，我们是希望不通过外网访问的，所以一个npm私服也必须要有。这里通过Sinopia来进行私服的搭建。npm私服,在拉取的时候，检测当前服务器没有该包时会从npmjs获取，而上传的时候，只发到私服，而不会提交到npmjs。

文档工具 Outline

现在组件库很多，相关的技术文档很多，在以往的情况下，公司使用了腾讯/飞书等进行文档管理，但是很多内容不希望外部知道的内容。所以使用Outline搭建了一个内部的文档工具。

Mock服务 YApi

以往前端和后端都口头约定，然后通过后端的swagger来生成文档。但是这存在一个问题，文档的生成滞后，前端没办法在正式接口之前进行mock。所以引入YApi,通过在Yapi上填写mock数据，进行数据的模拟。

jekins升级 docker/k8s

因为以往的构建，都是在一个项目中，现在微前端允许多框架，多环境构建。为了解决环境不统一的问题，引入了docker部署，对于多环境/多机器进行部署。

前端监控 sentry

Sentry 是一套开源的实时的异常收集、追踪、监控系统。这套解决方案由对应各种语言的 SDK 和一套庞大的数据后台服务组成，通过 Sentry SDK 的配置，还可以上报错误关联的版本信息、发布环境。同时 Sentry SDK 会自动捕捉异常发生前的相关操作，便于后续异常追踪。异常数据上报到数据服务之后，会通过过滤、关键信息提取、归纳展示在数据后台的 Web 界面中。

和平时代

基于上一次的工业大爆发，前端已经趋于稳定，公司业务也趋于稳定，老板的兰博已经停在了楼下。

在逐步的追求效率，追求速度的时期结束后，逐渐迎来了和平发展时期。这时候，团队开始关注自动化和创新。

灰度发布/一键回滚 k8s

各服务厂商都有提供灰度发布平台，结合服务商自己的服务可以对前端代码进行多环境，多场景，多条件的灰度部署及运维。

比如腾讯的服务网格，阿里的serverless等均有各种不同的服务。最基本的部署服务，就是根据k8s部署了多个不同的pod节点，然后根据规则匹配，对灰度环境进行的流量进行管理。

自动化测试 sonic

基于自动化测试的云平台，可以帮助每次执行真机的自动化测试，保证主流程的准确稳定。

性能监控/优化 Lighthouse/Sentry

chrome自带的Lighthouse可以进行本地性能的分析，同时搭配Sentry可以进行日志监控。

低代码/营销搭建 lowcode engine

公司一定时间之后一定需要一套做营销搭建和内部页面组织的工具，阿里开源的 lowcode engine可以在低代码领域进行快速的迭代。

AI客服 kimi/文心/通义

结合公司的文本资料库，将内容喂给Ai后，可以生成自己的Ai客服，解答一些常见的问题。