章前哔哔

最近看到了一些文章，是关于前端工程化方面的，看完后顿感——学前端也有一些时日了，我寻思我连开发工作才了解了一半？把业务开发和sdk开发分开，原来这才是模块化的正解，或者说最高级的模块化。感觉日常个人项目开发很少涉及sdk的开发，基本属于业务一条龙梭哈，但这不说明sdk开发不重要，特别是大型项目，往往都需要拆解功能插件，接下来就浅浅地拆解一下吧
参考文章：
一名大厂程序员的工作回顾
分享狼叔关于《大前端工程化的实践与思考》

什么是工程化

工程化一般是指在开发过程中引入系统化的工具链、自动化工作流、规范化管理工具，覆盖开发、测试、部署、运维等一系列流程，从而达到降低成本、提高效率、保障质量的目的的一系列行为

前端工程化涉及的方面

  • 工具化：针对业务场景开发脚手架，内置常用的前端组件库，提供代码检查等一系列插件，从而提升项目初始化效率
  • 规范化：面向需求完成整个研发流程，包括从需求评审、开发、前后端联调、测试、上线部署、后期运维、质量监控等一系列行为，完善整套流程体系
  • 平台化：发挥云平台的功效，将支撑研发的有关工具和系统聚合起来，通过套件和插件的设计模式，实现对不同场景的支撑，支持在线初始化项目，横向打通研发的整体链路。
  • 体系化：集成低代码、在线IDE、代码智能生成或推荐等能力，建设需求、设计、研发、运营一体化的云开发平台。

前端工程化常见内容

  1. 开发流程规范化：集成代码规范化工具等，确保代码质量
  2. 模块化和组件化：
    • 使用框架等封装模块和组件，提高组件复用性
    • 通过模块化发包，比如发布NPM包等提高功能复用性
  3. 打包和构建：使用webpack、vite等工具进行项目构建，这个过程的任务包括：代码压缩、Tree Shaking、代码转译等
  4. 自动化工作流配置：包括CI/CD流程，使用如github action等工具实现代码自动化测试和发布
  5. 测试和监控：包括单元测试、集成测试、UI测试、性能检测、日志追踪等工作

SDK项目工程化

一般的开发涉及两部分：分别是业务开发和SDK开发，业务开发即传统开发，即面向客户的开发，SDK开发则是面向开发者的开发

  • 业务项目：以Vue/React框架开发为主(需要非常熟悉相关框架的api)，还会涉及HTML、CSS，多数使用Webpack进行打包，一般不用考虑测试。
  • SDK项目：纯JS/TS开发为主（需要深入了解编程语言特性，比如类的创建、继承和各种封装），除了组件库基本不涉及HTML和CSS，多数使用Rollup打包和使用Jest进行单元测试。
  • 工具链开发：除上述两者之外，还有一种不一般的开发，即工具链，如webpack、vite等构建工具的开发，其目的是优化项目打包流程，但一般不涉及

总结

前端工程化是基于前端开发流程的一套工作流的构建，是从系统性的角度对整个项目实现高复用，可迭代发展的统筹的过程

具体的研发在前端工程化中只占据一小部分，可分为业务研发和SDK研发，其中业务研发为主要面向用户的研发流程，即通过框架和现有的工具进行需求开发，而SDK研发则是主要面向开发者的研发流程，即开发一系列的SDK资源包，使得这些资源包可以被高度复用，从而提升项目中的开发效率