前言：在web前端业务日益复杂化和多元化的情况下，前端的工作已经不在是写几个页面和写几个互动效果就能完成的工作了。当工程复杂到一定程度就会产生很多问题，比如项目的可维护性，如何提高开发效率和开发质量，如何进行多人协作，降低生产的风险？下面我们了解的前端工程化就可以帮我们解决这些问题。
什么是前端工程化
前端工程化是使用软件工程的技术和方法来进行前端的开发流程、技术、工具、经验等规范化、标准化，其主要目的是为了提高效率和降低成本，即提高开发过程中的开发效率，减少不必要的重复时间。
前端工程化如何做？
个人认为从模块化，组件化，规范化，自动化四个方面思考
模块化
-
js的模块化
在ES6之前，一直没有模块系统，现在ES6已经在语言层面上规定了模块系统。
js的模块化主要有CommonJS规范，AMD规范，CMD规范，ES6模块化。这里主要使用的是ES6模块化，其他的规范感兴趣的话可以去做一些了解。去了解
在ES6中，我们可以使用 import 关键字引入模块，通过 exprot 关键字导出模块 -
css的模块化
虽然SASS、LESS、Stylus等预处理器实现了CSS的文件拆分，但没有解决CSS模块化的一个重要问题：选择器的全局污染问题。
这时就需要CSS Modules来解决，它仍然使用css，只是让JS来管理依赖。它能够最大化地结合CSS生态和JS模块化能力，目前来看是最好的解决方案。
-
资源的模块化
webpack的强大之处不仅仅在于它统一了JS的各种模块系统，更重要的是它的万能模块加载理念。可以用loader对各种资源做各种事情，即所有的资源都可以且应该模块化。（即HTML资源，css资源，js资源，图片资源，字体资源等）
组件化
即从UI拆分下来的每个包含html+css+js功能完备的结构单元，我们称之为组件。
组件化更是一种分治思想，即页面上所有的东西都是组件，页面是个大型组件，里面拆分成若干个中型组件，然后可以再拆，拆成若干个小型组件。当然小型组件也可以在拆，直到拆成DOM元素为止，不过没有必要，组件化主要是为了实现组件在多个页面的复用。
比如你的页面中有一个导航条或者轮播图的功能，那你可以把它设计为组件，在多个页面中使用这个组件，当需求变动的时候只需要改这个组件里面的东西就可以了。
目前市面上的组件化框架很多，主要有Vue、React、Angular。
规范化
规范化是工程化中很重要的一个部分，项目初期规范制定的好坏会直接影响到后期的开发质量和维护成本。比如
-
目录结构的制定
目录结构的合理制定，可以为项目带来很多优点：
- 有助于提高项目的逻辑结构合理性；
- 对应扩展和合作；
- 方便资源的统一定位管理；
-
编码规范
制作一套良好的编码规范可以增强团队开发协作、提高代码质量。推荐参考凹凸实验室打造的前端代码规范。
编码规范包括：HTML规范、CSS规范、JS规范、图片规范、命名规范
-
前后端接口规范
在平常的开发中，前后端的关键协作点是ajax接口，这就引发一个问题，在没有任何接口约定规范情况下各自撸起柚子就是干，导致我们在开发过程中前后端接口联调对接工作占比非常高。
而接口规范主要初衷就是规范约定先行，尽量避免沟通中产生的不必要问题，让大家更愉快的专注于各自擅长的领域。
职责分离：后端就提供数据，处理业务逻辑。前端就接收数据，返回数据，处理渲染逻辑。
-
规范原则
- 接口返回数据显示，前端做渲染逻辑处理；
- 渲染逻辑禁止多个接口调用；
- 前端关注交互、渲染逻辑，尽量避免业务逻辑处理的出现；
- 请求响应传输数据格式：JSON，JSON数据尽量简单轻量，避免多级JSON的出现；
-
响应格式
响应基本格式及处理状态值的规范。
-
特殊内容
下拉框、复选框、单选框统一由后端逻辑判定选中返回给前端展示；
关于Boolean类型，JSON数据传输中一律使用1/0来标示，1为是/True，0为否/False
关于日期类型，JSON数据传输中一律使用字符串，具体日期格式因业务而定；
文档规范
组件管理
git分支管理
commit描述规范
视觉图标规范
...
自动化
前端工程化的很多脏活累活都应该交给自动化工具来完成。秉承的理念就是：任何简单机械的重复劳动都应该让机器去完成。
- 图标合并
- 持续集成
- 自动化构建
- 自动化部署
- 自动化测试
