InfoQ科技|从 Angular转到 React,网易严选的前端工程化实践
前端日益发展 , 从最初的 HTML、CSS、JavaScript 三大基础 , 到后来的 jQuery、Backbone、AngularJS , 再到现在的 Angular、React、Vue 三大框架流行 , 技术的演进既带来了更多的可能 , 也带来了一些问题 。 例如:团队如何高效合作、项目如何统一维护、代码如何规范等等 。 前端工程化的出现 , 就是为了解决这些日益突出的问题 。 它旨在制订规范化的前端工作流 , 并规范统一项目的模块化开发和前端资源 , 让代码的维护和互相协作更加容易更加方便 。
今年我们团队由 Angular 技术栈转变成 React 技术栈 , 在这个大背景下 , 我们急需一套完善的工程化方案来帮助技术栈落地 。 在通过确定目标、定义规范、技术调研、开发实现等一系列步骤之后 , 制定了一套完善的工程化方案 。 它帮助解决开发流程中的问题 , 让开发更加专注业务本身 , 提高整个系统生产效率 。
目标定义作为一个工程化方案 , 最终的目标是尽可能解决项目生命周期里遇到的问题 , 例如:
- 规范保障
每个团队都会根据实践经验 , 总结出一套自己的规范(项目规范和流程规范) 。 让这一套规范在落地到实际的开发中时 , 除了人为的约束 , 更多的应该是通过工具约束 。 工程化就是把团队的经验沉淀到脚手架和开发套件中 , 让新项目或新成员可以复用这些经验 。
- 提效
- 减少人力
同时 , 我们的工程化方案应该符合以下四个特点:
- 渐进式(技术演化能力)易于迭代
- 扩展性(可伸缩、可插拔)易于部门共建
- 易用性(贴合实际)易落地
- 数据统计与分析
首先 , 介绍整个方案的架构图:
本文插图
架构图
可以看到整个架构图分为四层:
1、底层依赖
最底层依赖了规范、webpack、schematics、node、eslint , 它是上次架构的基石 。
- 规范这里包括了项目规范和流程规范 , 是整套方案需要遵守的约定;因为这套规范是根据大量的实际业务总结出来的 , 所以它是贴合业务场景 , 便于整体方案落地的 。
- schematics 引入主要是为了解决上面说到的资源相关的问题 , 后面会详细讲到 。
这一层主要是对上层需要实现的功能做一个划分 , 然后通过插件的形式实现 。 例如:
- 将一系列模板抽离作为一个集合 , 然后将项目初始化时需要做的模板选择和模板处理放到 init 插件中完成 , 不同团队可以根据规范自定义插件;
- 开发编译阶段需要的 webpack 和 server、build 脚本放在 @sharkr/scripts 插件中完成 , 不同团队可以根据规范自定义插件;
- 前面说到的资源复用和资源升级问题 , 统称为文件处理相关 , @sharkr/schematics-cli 插件提供这个能力;
推荐阅读
- 材料|百利科技:首家锂电正极材料智慧工厂建成,氢能材料项目稳步推进
- 服务|薪宝科技荣获2020(深圳)人力资源数字化科技大赛二等奖
- 金融营销新视界|拥抱金融科技,中国银行持续提升用户体验!
- 百福地|霸州市百福地科技有限公司 | 用实力打造高品质美容仪器车
- 汽车|用科技俘获用户芳心“智慧”让BEIJING-X7美得更丰满
- 超新星|树木年轮或是超新星影响地球印迹
- 农业|农业无人机初创公司极飞科技宣布完成12亿元融资
- 农业|农业无人机初创企业极飞科技宣布完成12亿人民币融资
- 文库科技标杆|问题解决一半,华为可向高通购买芯片,但不包括5G芯片!
- 科技良辰|大量5G用户吐槽:“换了5G手机,网速比4G还慢”