前端基础能力都包含哪些方面

「这是我参与2022首次更文挑战的第31天，活动详情查看：2022首次更文挑战」。

前端技术架构都包含哪些方面，我们需要从下往上构建我们的技术架构图。

基础能力层

硬件基础

1. CDN & OSS 前端通常重视的是页面展示，而且当今业界的主流是前后端分离，所以CDN+OSS是我们常见的一种前端服务模式，这种模式的好处是完全脱离了后端，让前端自称一体，坏处是前端层过于薄，容易造成前端的工具化和空心化。不利前端的积累。 对于CDN和OSS，我们需要搞清楚的是它俩都是干嘛用的，它们之间有什么关系，前端应该如何配置oss与cdn才能获得最大的效益、满足业务的诉求、降低业务的风险。
2. 服务器 很多前端采用bff架构，加了一层薄薄的后端服务层，用来做一些跟前端密切相关，服务端不爱干的脏活累活。这些内容通常不体现在业务中，好处就是提高了前端的能力圈，提高了前端的自主性，也能解决一些前端的痛点；坏处就是增加了成本，提高了项目的风险，比较适合用在b端对场景，如果用来访问量较大的c端需要有较为牢固的基础设施。

软件基础

1. 流水线 从项目的构建到项目的发布，中间有很多的步骤，如果全部靠人来做很容易出错，流水线的作用就是将整个流程自动化。因为代码和需求相关，所以这些流水线通常还会关联需求管理的能力。
2. 代码仓库 目前我们通常在git代码仓库中保存自己的代码
3. 执行环境 浏览器也是非常重要的一方面，我们需要考虑到各种不同的执行环境，小程序？浏览器？IE？不同的执行环境对前端项目影响很大
4. 包管理方案 代码仓库只能管理代码，都是私有权限，但是我们需要一个公有的地址，来存储每个项目都可以使用的公用代码，可以用一些商业npm仓库或者自建npm仓库来实现
5. 业界主流技术 如react、vue等等，这些我们后面会展开来讲。