前段时间对于前端工程化的理解尚停留在用gulp或者webpack自动构建的层次,但其实包括自己在做项目的过程中早就在践行「工程化」开发,以下结合一些博客以及自己的理解详述前端工程化开发的含义。
前端工程化开发
references:
概念
前端工程化是使用软件工程的技术和方法来进行前端项目的开发、维护和管理。
这里顺带说下软件工程的概念:应用计算机科学理论和技术以及工程管理原则和方法,按预算和进度,实现满足用户要求的软件产品的定义、开发、和维护的工程或进行研究的学科.
软件开发的整个流程我在我的博客:前端开发工作流程中做过更新。
内容
技术选型
在开始前端工程时,根据项目特征进行技术选型,节省项目开发时间。
代码规范
保证团队所有成员以同样的规范开发代码。
不同的开发人员开发不同的功能或组件,按照统一的流程合并到主干。
模块化开发,组件化开发
模块是在文件层面上,对代码和资源的拆分,比如js模块,css模块。组件是在UI层面上的拆分,比如页头,页脚,评论区等
模块管理
一方面,团队引用的模块应该是规范的;另一方面,必须保证这些模块可以正确的加入到最终编译好的包文件中。(以上两点可以总结为模块化或者组件化开发。)
自动化测试
为了保证和并进主干的代码达到质量标准,必须有测试,而且测试应该是自动化的,可以回归的。
构建
主干更新以后,自动将代码编译为最终的目标格式,并且准备好各种静态资源,
部署
将构建好的代码部署到生产环境。
一点思考
一般在做迭代的时候会有一定的概率影响之前一些公共或者非公共的组件,如何实现自动化的回归测试,是一个值得探讨的地方。
tips: 寻找webpack的依赖树?