
前端工程化主要应该从模块化、组件化、规范化、自动化四个方面来思考
很多小伙伴会狭隘的认为工程化就是webpack或者gulp打包而已,
应该涵盖从项目创建、开发、编译、打包、测试、发布、监控全流程。
项目初始化 项目脚手架目前已经非常普遍,例如create-react-app或者vue-cli都是官方标准的脚手架工具。对于一些稍大的公司都建议自己包装一套自己的脚手架,这样可以沉淀很多最佳实践,例如工程目录结构、lint配置、监控配置、打点配置等等,因此脚手架是落地前端架构标准化不可或缺的一环。
本地开发 lint 的规范一定要在项目初期就落地,可以直接拿airbnb的规范或者再定制化一下。lint可以极大的提升代码质量,至少从代码风格来看可以保证统一。 Sonar 的引入可以进一步提升代码质量,帮助分析出潜在的问题,同时分析代码的重复率,过长的高数等等,这些都是所谓的代码bad smell,如果任其发展下去,项目维护成本会直线上升。 Mock工具的必要性在前后端联调时就能充分提现,很多时候由于前后端接口定义不清晰导致联调过程就是一个扯皮过程,如果缺乏mock工具,前端也会沦为后端接口调试的触发器,前端页面点一下,后端调试大半天,前端小伙伴们伤不起啊。Mock工具至少要有接口定义和本地mock的能力,能够极大提升大家研发体验。
打包 前端工程打包工具强烈推荐 webpack 4,强大的插件能力能够让你做几乎任何事情。webpack4中引入了更为强大智能的code split能力,能够极大缩减包大小,经过实践通常减小幅度都在30%-50%,而且在打包速度上也有很大改进,通常也有30%的提升。