浅谈前端工程化思想

很多人可能这样认为，前端工程化无非就是框架/库、简单的构建、css/js模块化开发而已，其实这些只是前端工程话的一部分，当我们开发一个大型的web应用的时候，将会面临很多工程方面的问题，比如：多人如何协作开发、组件模块如何复用、如何调试部署、版本如何管理控制、性能如何优化。因此，做好前端工程化，需要我们做如下的几件事：

1.开发规范

制定好开发、部署的目录规范、编码规范、好的目录规范能让项目解构清晰，便于维护和扩展；好的编码规范能让团队人员的代码风格统一，便于代码的审查

---

2.模块化

针对JavaScript、CSS，以功能或者是业务为单元组织代码。JavaScript模块化方案有很多，如：AMD/CommonJS/UMD/ES 6 module等，CSS模块化基本都是在less、sass、stylus等预处理器的import/mixin特性的支持下完成的

3.组件化

将页面拆分成多个组件（component）。每个组件依赖的CSS、JavaScript、模板、图片等资源放在一起开发和维护。组件是资源独立的，组件在系统内部可复用，组件和组件之间可以嵌套。现在比较流行的前端框架比如：React、Vue.js等都是提倡的是组件化开发方式。

4.组件库

有了组件库，我们还想将一些非常通用的组件或者JavaScript模块放到一个公共的地方供团队共享，方便新项目的复用，这就形成了组件库，常见的组件库bower、component等。

5.性能优化

通过工程化手段来解决性能优化问题。比如常见的请求合并、资源压缩、CDN、甚至一些前沿的优化手段如bigpipe何bigender，都是通过工程化手段来保证的，面对业务开发者是透明的。

6.项目部署

项目部署一般包括静态资源缓存、CDN、增量发布等问题。合理的静态资源部署可以为前端性能带来较大的优化空间，而增量发布又为项目的版本控制、A/B Test方案提供了保证。

7.开发流程

完整的开发流程本地开发调试、视觉走查确认、前后端联调、测试、上线等环节。

8.工程工具

工程工具包括构建与优化工具、开发–调试–部署等流程工具、组件的获取和提交工具等。这些工具往往都是独立的系统，如果分开来用，成本太高了。因此能否串联这些功能，使得前端开发可以持续集成，工具的设计就变得至关重要了。