认识达内从这里开始

web前端编程开发技术随着互联网的不断发展而被越来越多的程序员掌握，而且web前端程序员也是目前比较热门的一个招聘岗位，今天我们就通过案例分析来简单了解一下，web前端工程化发展趋势分析。

纵观前端的发展史，基本经历以下过程

刀耕火种的早期时代(前端领域还没细分出来)

适用小项目，前后端一体，页面基本由JSP、PHP等在服务端生成，浏览器负责展现

后端为主的MVC时代

B/S架构兴起，进而有了前端、后端之分;目的降低复杂度，以后端为出发点，有了WebServer层的架构升级，比如Structs、SpringMVC等

Ajax带来的数据视图的初步分离，SPA逐步进入大众视野

随着前端复杂度的上升，模块复用、实践规范越来越重要，在2005年Ajax正式提出，前端开发进入SPA(SinglePageApplication单页面应用)时代

但是基于Ajax同样面临着很多挑战：接口约束性、前端开发的复杂度控制。SPA应用大多以功能交互型为主，大量JS代码的组织，与View层的绑定等，都不是容易的事情。

前端为主的MVC、MV*时代

为了降低前端开发复杂度，Backbone、EmberJS、KnockoutJS、AngularJS、React、Vue等大量前端框架涌现

Node带来的全栈时代

随着Node.js的兴起，为前端开发带来一种新的开发模式。业界比较出名的实践是，阿里巴巴的中途岛计划。同时利用Node更加便捷管理和简化前端开发过程，前端框架、自动化、构建系统应运而生并发展迅猛

基于行业佳实践，开箱即用的框架(如dva、umi)、工具体系等逐渐建立起来Node给前端带来的不光是一种更加便捷的开发模式，更是无限可能

前后端职责很清晰

业务开发的复杂度可控，通过合理的组件化、模块化、微前端化，让项目持续可维护

前端侧部署和服务端解耦，部署更加便捷快速

前端可能不再是单一终端开发，面向更广的终端及场景可应用

前端越来越重，复杂度越来越高，配套的前端工程体系也在不断发展和完善，可简单分为开发、构建、发布3条主线：

前端框架：插件化(jQuery)->模块化(RequireJS)->组件化(React)

构建工具：grunt/gulp(任务化)->webpack(系统化)->vite(提速)

CI/CD：工具化(Jenkins)->自动化(WebHook)

三大主线撑起了前端工程体系，系统地覆盖了前端开发的主流程，其中的工程方法也彼此互补、相互影响，体现在：

构建工具让百花齐放的前端框架、类库能够无缝合作

前端框架、类库也在一定程度上影响着构建工具(如模块加载、CSS预处理)、甚至CI/CD(如SSR)

工程化主要解决什么

规范化制定各项规范，让工作有章可循;项目初期规范制定的好坏，直接决定后期的开发质量，以及业务迭代代码的腐化速率;规范化主要分为编程规范化、前后端接口规范化、git分支管理、commit描述规范...核心要求规则先行，确保项目质量

模块化模块化分为文件级别的以及工程级别，工程的模块化主要是根据工程的业务逻辑和组件特点，将工程拆分成不同的子工程，每个子工程可以单独编译打包发布，降低各自之间的耦合度，比如微前端;文件资源的模块化分为对js脚本的统一整合达到同步加载或者一部加载;CSS的模块化主要是利用cssmodules对css进行模块化拆分，目前主流的模块化构建工具webpack，避免了重复资源的出现

组件化组件化是指将UI页面拆分成“模板+样式+逻辑”组成的功能单元，称为组件(细分领域下可能将业务逻辑解耦，达到纯交互组件)。注意：组件化不等于模块化，模块化是在资源和代码方面对文件的拆分，而组件化是在UI层面进行的拆分

自动化自动化是指利用各种持续集成手段，将简单重复的工作交给机器完成，例如自动化测试，自动化部署，自动化构建，持续集成等。目前是市面上主流的工具平台有Jenkins

玩物得志工程化实践

统一前端侧技术栈，针对性提供各场景项目模板，提供组件搭建发布能力，提供终端命令或可视化界面管理的方式创建组件/应用，利用盘古平台可视化执行脚手架构建命令

【免责声明】：本内容转载于网络，转载目的在于传递信息。文章内容为作者个人意见，本平台对文中陈述、观点保持中立，不对所包含内容的准确性、可靠性与完整性提供形式地保证。请读者仅作参考。更多内容请加danei0707学习了解。欢迎关注“达内在线”参与分销，赚更多好礼。