头图

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

全栈加加
作者:加加

博客:官网、掘金、思否、知乎

公众号:全栈加加

特别声明:原创不易,未经授权不得转载或抄袭,如需转载可联系笔者授权

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

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


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

欢迎关注公众号全栈加加,一个专注于全栈修炼之道的公众号,更多编程干货等你来拿

  • 关注后回复资料免费领取学习资料
  • 关注后可用加我微信与我交流或者进群交流

aa

阅读 81
1 声望
0 粉丝
0 条评论
你知道吗?

1 声望
0 粉丝
宣传栏