前端工程化的理解

什么是"前端工程化"?

目前来说,web业务日益复杂化和多元化,前端开发从WebPage模式为主转变为WebApp模式为主了。前端的开发工作在一些场景下被认为只是日常的一项简单工作,或只是某个项目的"附属品",并没有被当做一个"软件"而认真对待(无论是产品负责人还是开发者)。

在模式的转变下,前端都已经不是过去的拼几个页面和搞几个jq插件就能完成。当工程复杂就会产生许多问题,比如:

  • 如何进行高效的多人协作?
  • 如何保证项目的可维护性?
  • 如何提高项目的开发质量?
  • 如何降低项目生产的风险?
  • ...

前端工程化是使用软件工程的技术和方法来进行前端的开发流程、技术、工具、经验等规范化、标准化,其主要目的为了提高效率和降低成本,即提高开发过程中的开发效率,减少不必要的重复工作时间,而前端工程本质上是软件工程的一种,因此我们应该从软件工程的角度来研究前端工程。

"前端工程化"里面的工程指软件工程,和我们一般说的工程是两个完全不同的概念。

  • 工程是个很泛泛的概念,甚至可以认为建了一个git仓库就相对于新建了一个工程;
  • 软件工程的定义是: "应用计算机科学理论和技术以及工程管理原则和方法,按预算和进度,实现满足用户要求的软件产品的定义、开发、和维护的工程或进行研究的学科"(GB/T11457-2006《信息技术 软件工程术语》)。

如何做"前端工程化"?

前端工程化就是为了让前端开发能够“自成体系”,个人认为主要应该从模块化组件化规范化自动化四个方面思考。

模块化

简单来说,模块化就是将一个大文件拆分成相互依赖的小文件,再进行统一的拼装和加载。

  • JS的模块化

    在ES6之前,JavaScript一直没有模块系统,这对开发大型复杂的前端工程造成了巨大的障碍。对此社区制定了一些模块加载方案,如CommonJS、AMD和CMD等。

    现在ES6已经在语言层面上规定了模块系统,完全可以取代现有的CommonJS和AMD规范,而且使用起来相当简洁,并且有静态加载的特性。

    1. Webpack + Babel将所有模块打包成一个文件同步加载,也可以搭乘多个chunk异步加载;
    2. System+Babel主要是分模块异步加载;
    3. 用浏览器的

你可能感兴趣的:(前端工程化的理解)