10. 前端基建

npm 私服

项目中使用 Verdaccio 搭建了 npm 私服，主要用于缓存外部包和发布公司内部的组件库和工具库，提高构建效率、保障发布安全。我们通过配置 config.yaml 实现了权限控制，结合 CI/CD 流程实现了私有包的一键发布。日常开发中通过 .npmrc 设置私服源，实现透明化安装。

自己封装 ahri-ui？

ANTD 适合中后台的通用组件库，这些组件基本可以满足一个系统 80% 以上的页面搭建诉求；

• 优：组件非常全面，样式效果也不错，

• 缺：框架自定义程度低，默认 UI 风格修改困难

因此也应公司业务需求，我们组织开发了一套改版的 antd，叫 ahri-ui；开发过程中通过对 antd 源码的阅读，我得到了如下的一些经验。

• 结构清晰：每个 UI 组件都是完整的模块，都有自己独立的目录结构
• 组件分离：每个 IO 组件都是可以被独立引用的，按需引入的思想，减少业务方文件大小
• 测试覆盖：antd 通过 jest 覆盖了每个组件的测试

Docker

docker: 仅仅几百兆，一台机器大约可部署 2000 个 docker，实现轻量级的集群；只要做好一个环境，所有环境就可以实现集群部署； 所有的项目最终都要布署到线上才能对外提供服务，现在主要使用 docker 直接启动镜像的方式，Docker 是一个容器化平台，它以容器的形式将您的应用程序及其所有依赖项打包在一起，以确保您的应用程序在任何环境中无缝运行，常用命令有 docker build ，docker pull/push ，docker run -p，docker tag 等等，前端镜像部署的话，在 dockerFile 中 基于 nginx，我们将 nginx.conf（做一些压缩，设置日志格式等等） , app.conf（做一些反向代理的配置）复制到 对应的环境中，再将 dist 复制到 根目录下，然后，即可打包制作镜像；

实际使用场景通常是跟 CI/CD 结合，以每个 git commit 作为版本号，有问题的时候就回滚；

CI/CD

我们是使用 GitLab 问题（Issues）、史诗（Epics）和里程碑（Milestones）进行项目组合和项目管理，他同是也支持 cicd，（虽然相较于 Jenkins 这个老大哥，他还是个新手）使用 YAML 文件来描述整个管道。

只需要在仓库根目录下创建。gitlab-ci.yml 文件，并配置 GitLab Runner；

每次提交的时候，gitlab 将自动识别到。gitlab-ci.yml 文件，

stage：build | lint | dockerize | deploy