认识达内从这里开始

web前端编程开发随着互联网的不断发展被众多程序员掌握，下面我们就通过案例分析来了解一下，web前端工程化的作用与常见问题。

工程化主要解决什么

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

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

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

自动化自动化是指利用各种持续集成手段，将简单重复的工作交给机器完成，例如自动化测试，自动化部署，自动化构建，持续集成等。

前端工程化常见问题

脚手架的问题脚手架的本质是复制粘贴一堆样板代码，组成新的项目;造成两个核心问题，一：创建出来的前端项目因为业务需求需要变动且必须变动，随着一轮轮的重构及贴近业务项目同样会加速分裂和腐化;二：脚手架本身也会升级迭代，一用即抛，这些改进不能对原先创建的项目带来好处，引入这些改进的成本，跟从其他项目里引入改进的成本差不多

项目模板的问题进一步到项目模板上，脚手架的支撑依赖的就是丰富的项目模块，不但脚手架建设者需要提供多种模板，覆盖不同的需求，使用者也经常需要复制原有模板，修改成新的模板，比如产品的技术形态是SPA还是MPA，都会产生不同的模板，以及需要应对不同的场景类型,这些维度之间的排列组合，要么会导致模板进一步分裂和数量爆炸，每种模板的维护成本更高，应用场景更小，ROI因此变低，更加倾向于停滞;要么会导致模板对很多维度中的需求，不做考虑，只覆盖小部分需求，对项目开发的支持，局限在比较低的水平。

云工作流

由WebIDE发展而来的云开发工具，目前正逐渐成为几个大型厂商探索的方向之一。从开发到部署的完整云端工作流方式在未来可能成为标准。

AI页面自动生成

基于AI的生成页面工具(例如微软的Sketch2Code)可以进一步解放生产力。目前，无论是基于设计稿(Sketch/PSD)的精准生成方式，还是基于草图乃至描述语句的AI匹配生成方式，仍有各自的局限性。但是随着AI技术的发展，这类产品可能会替代目前前端开发过程中的一些基础重复性工作。

【免责声明】本文系本网编辑部分转载，转载目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题，请在30日内与管理员联系，我们会予以更改或删除相关文章，以保证您的权益!更多内容请加danei0707学习了解。欢迎关注“达内在线”参与分销，赚更多好礼。