前端工程化研究

前端工程化研究

前言

随着互联网的迅速发展，这几年进化速度之快让人咂舌，很多前端工程师都不禁吐槽“学不动了”。如今前端可谓包罗万象，产品形态五花八门，涉猎极广，各种各样的框架和库，随着web业务日益复杂化和多元化，UI的要求变高，从WebPage模式为主转变为WebApp模式，也从有混合模式开发到分离式开发的转变，对前端工程师的能力越来越来高，能力和层次已经不是 HTML、CSS、JS 前端三剑客仗剑那个时代了，我记得在15年的时候我在上海，当时JS 框架以 jQuery 为主，less 基本都不用，而我现在说在的公司前端的开发框架以 Vue 为主，使用 Webpack 解决接口 mock、代码检查、代码编译、构建、压缩、添加版本号、部署等全流程的工作。涉及到的技术点有 Vue、Vuex、ESlint、stylelint、Mock、Webpack、Sass、PostCSS 等。对前端的要求相比几年前已经从单纯的 JS、CSS 问题变成了更多工程化为主的问题。

个人理解

前端工程化是一个很大的话题，甚至到现在都没有一个准确的定义，无论是蚂蚁金服前端团队或者淘宝前端团队等大厂的前端团队，都没有一个完善的概括，归纳，定义。但是我在的理解，前端工程化，就是以提升能提升前端开发效率、前端应用质量的手段、工具和组件的通用能力，快速开发和构建一个项目为中心，来解决项目开发周期长、成本高、维护难等能力。

前端工程化的好处

• 进行高效的多人协作
• 保证项目的可维护性
• 保证项目的开发质量
• 降低项目生产的风险
• 提高快速生产的能力

前端工程化构建

• 代码规范化

我们都知道，每个程序员的代码风格都不一样，就像每个人都有独特的特性，如果没有合理的规范，那么代码的工程越来越难以维护，离职交接也就越来越难，增加新人学习成本、维护、开发等成本。每个人都有入职的经历，你在入职的时候，不可能让你做新项目，都是让你看老项目，看代码、维护等，看到不理解的或者奇葩风格，就会吐槽“日了狗，这代码真TMD的牛逼”等等，各种不爽和污秽的言语脱口而出。特别前端，灵活性更高，所以风格变化多端，所以一套的规范化，是团队的基础，也是共同维护的根本，新老交替，快、准、狠，对团队，对公司都有极大的好处，也增加了团队的凝聚力！团队内部也变得很和谐，沟通成本也变得很低；

tips:

代码规范
前端开发规范[html篇]
前端开发规范[js篇]
前端开发规范[css篇]
前端开发规范[项目工程篇]

提交规范
vue-cli 加入lint-staged 半自动提升项目代码质量
git 加入钩子和提交信息规范化
Commit message 的格式说明

接口规范
前后端分离研究，以及接口规范

其他
漫谈CodeReview：团队内壁代码审查和学习
vscode中的插件Settings Sync（设置和插件同步）基本用法:开发工具和配置统一化

• 数据模拟化

脱离后端，前端能够独立运行，展示无异常，大大节约了开发的时间成本，前端和后端能够同步进行开发。mock工具有easymock、jMock、Mockito、Unitils Mock、PowerMock、JMockit等等
mock的选型

• npm 私服化

由于公司内部项目开发，处于隐私保护的需要，不想将自己封的包推到npm社区，，但又急需要一套完整的包管理工具来管理越来越多的组件，模块，项目；还有经常下载一些npm包，有时候下载不下来，有时候下载，下来运行报错，各种坑，还有内部git 环境ci/cd 自动部署耗时过程，就把公司使用频繁的一些包弄到内部环境，有内部环境下载，会更快，也不会出现下载不下来的情况。

未完，补充中…