1 前言
大家好,今天我来和大家一起来了解前端工程化的知识,如有疑问和错误,欢迎指正,一起交流探讨哈!
2 什么是前端工程化?
- 在我看来,所有能降低成本,并且能提高效率的事情的总称为工程化
- 众所周知,软件工程化关注的是性能,稳定性,可用性,可维护性等方面,一切以这些为目标的工作都是"前端工程化",更多的是往高效,稳定,可用,可维护的方向发展
3 前端为什么需要工程化?
- 随者前端的快速发展,现在的前端”太大,太广“,”复杂“,"大前端","微前端"等词的出现,前端已经不再止于前端了
- 更有甚者,可以说前端不再是后端的附属品了,可以说,前端已经愈加成熟
4 前端工程化要解决哪些问题?
存在即合理,前端工程化的出现,主要为了解决如下情况:
- 4.1 提高前端工程师的开发效率
提高开发效率从以下这几个方面入手:
- 扩展javascript,html,css本身的语言能力
- 解决重复的工作
- 模块化,组件化
- 解决功能复用和变更问题
- 解决开发和产品环境差异问题
- 解决发布流程问题
- 4.2 进行高效的多人协作
- 前端工程化正是在保存工程稳定的情况下进行顺利协作
- 4.3 保证项目的可维护性
- 我们知道软件工程化处理正是为了项目工程的可维护性
- 4.4 提高项目的开发质量
- 在以上情况的实现下,项目的开发质量必然得到保证
5 前端工程化发展的四个阶段
我个人看来前端工程化包括如下阶段:
- 第一阶段:库/框架选型 前端的库和框架大致有(jquery,zepto,underscore,angular,react,vue)
- 第二阶段:简单构建优化 构建工具有(grunt,gulp)
- 第三阶段:js/css模块化开发 (AMD/CommonJS/UMD/ES6 Module Less/Sass/Stylus)
- 第四阶段:组件化开发与资源管理[分治思想] 比如:微信小程序工程化
6 前端工程化的深究
前端工程化是对模块化,组件化,规范化,自动化的高度概括和总结凝练,是一个更高层次的思想,也就是说实现前端工程化应该从模块化,组件化,规范化,自动化四个方面着手
- 前端模块化
- 在工程化的基础上,模块化的职责在于模块管理和资源加载
- 模块化的常用工具有:Nodejs,npm,webpack,parcel,rollup等
- 前端组件化
- 组件化趋势的发展存在很大的优势,它自由,灵活,可复用,大大提高了开发的效率
- 它的应用实践,我觉得微信小程序的目录结构应用的是组件化的思想
- 前端规范化
- 关于规范化的工具主要有:eslint,styleint
- 前端自动化
- 自动化阶段包括构建,测试,部署三个阶段
- 自动化构建工具有grunt,gulp,对文件进行压缩,校验,资源合并等处理方式
- 自动化测试借助于一些单元测试框架(Chai,Karma,Mocha),UI测试框架(Jest,Enzyme,Selenium Webdriver)测试功能代码,其次还有性能测试-Benchmark,覆盖率测试-Istanbul,持续集成(travis-ci,codecov)帮助我们高效得完成测试工作
- 自动化部署使用pm2,项目是一个迭代开发的过程,使用pm2工具可用简化开发流程,大大提高开发效率
7 总结
通过上面,我们大致了解了前端工程化的知识,但是前端工程化可能远不止于上面所提到知识,学无止境,要知道我们是很难跟上前端快速的更新迭代,我只能从多方面发展和完善自己的知识,紧跟前端技术的脚步,争取取得更大的进步!
如果觉得我的文章写得不错,欢迎关注,点赞,在看,分享,收藏!爱你么么哒!