前端工程化

麦壳儿
305 阅读5分钟

文章摘要：

  • 一、概述
  • 二、如何落地
  • 三、每个环节细化
    • 0.规范化
    • 1.编码
    • 2.测试
    • 3.构建
    • 4.部署
    • 5.运维
    • 6.性能
  • 四、成熟方案

一、概述

不要局限于打包、构建这一小块的东西。它一个很宽泛的东西，可以理解成：软件工程一门学科！也就是：编码、测试、构建、发布、运护 一整套体系。

二、如何落地

具体落地：是把某些工具、思想、开发规范 给串起来，结合公司目前的开发环境、基建能力、人员、产品形态等形成一整套自己的工程化链路。

三、每个环节细化

0.规范

在处理一个大型项目前，最好把各个方面的规范先确定下来。

  • 目录结构规范
  • 编码规范
  • 前后端接口规范
  • 图标规范
  • 设计规范
  • git分支管理规范
  • git commit 备注规范
  • codeReview 规范
  • 文档规范
  • 版本规范
  • 发布流规范

1.编码

再做一个新项目之前，这些东西你都要考虑清楚的。

  • 技术选型
  • 开发模式选择，前后端完全分离？同构直出？
  • 组件库选择
  • Mock 方案
  • 全家桶，路由？状态管理？调试工具？
  • 脚手架，手撸？CRA？VueCLI？
  • 目录划分
  • 领域模型设计
  • 分支管理方案
  • 微前端
  • ...

往往在你编写第一行业务逻辑或者页面代码之前，就得经过这么一系列的思考，这个时候有同

学会问，直接 Umi 一把梭哈不就行了？

字节跳动，可能用的都是Umi的全家桶，减少这些繁琐的思考过程。它里面统统都集成好了，配置都有，都是最佳实践，开箱即用！

所以，Umi 就是一套前端工程化工具！

2.测试

2.1 TDD

即单元测试，开发自己负责的测试。

概念：
开发前先写好测试用例，测试驱动开发。
特点：
费人力时间，所以很烧钱，一般外企用，国内较少使用，但是确实是一套很好的测试方案！

优点：
严格遵循TDD开发出来的代码，鲁棒性很高、以后做代码迁移、升降、重构都没有问题！

2.2 QA

即交给测试同事进行的测试。

「手动测试」「冒烟」「AB」「自动化测试」等等,或是通过无头浏览器书写程序模拟人的行为对交互进行测试。

3.构建

3.1 工具

gulp、webpack、rollup、vite等
能用、会用、遇到问题能解决就可以了。\

因为随着浏览器的进化，可能不需要打包就可以了，那前端打包工具存在的意义就没了。

3.2 能力

最常用的webpack，看他能带来哪些能力？

  • 依赖打包（模块化）
  • 类库打包
  • 代码分割- chunk
  • 文件压缩
  • cache
  • 增量更新
  • 热更新
  • CSS 预处理或者后处理(postCSS)
  • ES与Babel
  • 资源定位
  • 构建优化
  • ...

4.部署

部署简单说就是把代码放到 CDN、机器这些地方去，很多前端同学在这一 part 往往不够重视，我们先梳理一下这部分涉及的内容有 哪些？

  • 持续集成/持续部署（CI/CD）
  • 部署流程设计
  • 静态资源部署策略
  • Nginx反向代理
  • 跨域
  • HTTPs证书
  • HTTP2配置
  • 灰度发布
  • Docker、K8S
  • Shell
  • 网关
  • HUB
  • 监控
  • Jenkins 这些东西其实就是所谓的基建了，很多年头比较久远的互联网公司都有对应的配套基建，提供 了一些可视化、命令行工具等开箱即用的解决工具，比如百度的 ICode。

4.1 shell脚本

几个相关文件

  1. compile.sh:打包的shell脚步
  2. run.sh:运行的脚步
  3. check.sh:定时检测心跳的脚本
  4. manifest.yaml:配置文件，类似json。把上面的文件流串起来：打包 -> 运行 -> 定期检测心跳

4.2 Nginx

背景

Nginx是为俄罗斯访问量第二的站点设计开发的。从2004年发布至今，凭借开源的力量，已经接近成熟与完善。

功能丰富

  1. 可作为HTTP服务器
  2. 也可作为反向代理(服务器的代理)( TODO：代理到多台就是负载均衡)
  3. 支持Virtual Host
  4. URL Rewrite
  5. Gzip等功能

常用功能

  • 负载均衡

Nginx提供的负载均衡策略有2种：内置策略和扩展策略。内置策略为轮询。扩展策略，就天马行空，只有你想不到的没有他做不到的。

负载均衡.jpg

Nginx优点

Nginx的稳定性好、功能全面、系统资源消耗低，让他后来者居上，在全球活跃的网站中有12.18%的使用比率，大约为2220万个网站。

4.3 docker

提供基建的，属于运维的范畴。但是前端也可以去学习掌握。就像nodeJS做服务端的事情、RN(reactNative)做原生的开发，前端可以扩展自己涉猎面。

5.运维

「部署」与「运行」，「维护」其实是一起的，所以上面一起说了。\

7.性能

  • 性能测试
  • 缓存
  • CDN
  • 按需加载
  • 预加载
  • 合并请求
  • 首屏渲染速度
  • HTTP2服务器推送

四、成熟方案

Umi

“乌米” 是蚂蚁金服团队写的。
可以理解：它就是一个脚手架，可以生成现成的项目架子，是基于react+ant 生态链的。 用它创建出来的项目结构：额外集成 mock、测试、构建配置等。开箱即用，都是时下最佳方案。不用你去设计搭建了。

├── config  # umi 配置，包含路由，构建等配置
│  ├── config  # 配置包含路由等
│  ├── ... # 其他
├── mock  # 本地模拟数据
├── public
│  └── favicon.png # Favicon
├── src
│  ├── assets  # 本地静态资源
│  ├── components  # 业务通用组件
│  ├── e2e # 集成测试用例
│  ├── layouts # 通用布局
│  ├── models  # 全局 dva model
│  ├── pages # 业务页面入口和常用模板
│  ├── services  # 后台接口服务
│  ├── utils # 工具库
│  ├── locales # 国际化资源
│  ├── global.less # 全局样式
│  └── global.ts # 全局 JS
├── tests # 测试工具
├── README.md
├── package.json
└── ... # 其他
avatar
文章
阅读
粉丝