前端工程化概述，带你全面深刻了解前端工程化思想

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 总结

通过上面，我们大致了解了前端工程化的知识，但是前端工程化可能远不止于上面所提到知识，学无止境，要知道我们是很难跟上前端快速的更新迭代，我只能从多方面发展和完善自己的知识，紧跟前端技术的脚步，争取取得更大的进步！

如果觉得我的文章写得不错，欢迎关注，点赞，在看，分享，收藏！爱你么么哒！