谈谈前端工程化是个啥？

目前来讲，Web业务日益复杂化和多元化，前端开发已经由以WebPage模式为主转变为以WebApp模式为主了。如今随便找个前端项目，都已经不是过去的拼个页面+搞几个jQuery插件就能完成的了。工程复杂了就会产生许多问题，好比：如何进行高效的多人协做？如何保证项目的可维护性？如何提升项目的开发质量？

前端工程化就是解决以上问题而生的。

前端工程化有四个特色：模块化、组件化、自动化、规范化。   

模块化：

就是将 一个大文件拆分红相互依赖的小文件，再进行统一的拼装和加载。只有这样，才有多人协助的可能。在工程化以前，一直是使用js、jquery、ajax，这没有模块概念，对于开发大型且复杂的系统会有必定的限制。

JS的模块化

• 在ES6以前，JavaScript一直没有模块系统，这对开发大型复杂的前端工程形成了巨大的障碍。对此社区制定了一些模块加载方案，如CommonJS、AMD和CMD等，某些框架也会有本身模块系统，好比Angular1.x。
• 如今ES6已经在语言层面上规定了模块系统，彻底能够取代现有的CommonJS和AMD规范，并且使用起来至关简洁，而且有静态加载的特性。

CSS的模块化

• 虽然SASS、LESS、Stylus等预处理器实现了CSS的文件拆分，但没有解决CSS模块化的一个重要问题：选择器的全局污染问题。
• 按道理，一个模块化的文件应该要隐藏内部做用域，只暴露少许接口给使用者。而按照目前预处理器的方式，导入一个CSS模块后，已存在的样式有被覆盖的风险。虽然重写样式是CSS的一个优点，但这并不利于多人协做。
• 为了不全局选择器的冲突，各厂都制定了本身的CSS命名风格：BEM风格，bootstrap风格等
• 但这毕竟是弱约束。选择器随着项目的增加变得越多越复杂，而后项目组里再来个新人带入本身的风格，就更加混乱了。
• 从工具层面，社区又创造出Shadow DOM、CSS in JS和CSS Modules三种解决方案。
• Shadow DOM是WebComponents的标准。它能解决全局污染问题，但目前不少浏览器不兼容，对咱们来讲还好久远；
• CSS in JS是完全抛弃CSS，使用JS或JSON来写样式。这种方法很激进，不能利用现有的CSS技术，并且处理伪类等问题比较困难；
• CSS Modules仍然使用CSS，只是让JS来管理依赖。它可以最大化地结合CSS生态和JS模块化能力，目前来看是最好的解决方案。Vue的scoped style也算是一种。

 

资源模块化

• 什么是Webpack？
• WebPack能够看作是模块打包机：它作的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。

• Webpack的强大之处不只仅在于它统一了JS的各类模块系统，取代了Browserify、RequireJS、SeaJS的工做。更重要的是它的万能模块加载理念，即全部的资源均可以且也应该模块化。

资源模块化后，有三个好处：

• 依赖关系单一化。全部CSS和图片等资源的依赖关系统一走JS路线，无需额外处理CSS预处理器的依赖关系，也不需处理代码迁移时的图片合并、字体图片等路径问题；
• 资源处理集成化。如今能够用loader对各类资源作各类事情，好比复杂的vue-loader等等。
• 项目结构清晰化。使用Webpack后，你的项目结构总能够表示成这样的函数： dest = webpack(src, config)

 

 

组件化：

• 组件化≠模块化。模板化只是在文件层面上，对代码和资源的拆分；组件化是在设计层面上，对于UI的拆分。
• 从UI上拆分下来的每个包模板（html）+样式（CSS）+逻辑（JS）功能完备的结构单元，称之为组件。
• 页面上全部的东西均可以当作组件，页面是个大型组件，能够拆成若干个中型组件，而后中型组件还能够再拆，拆成若干个小型组件，小型组件也能够再拆，直到拆成DOM元素为止。DOM元素能够当作是浏览器自身的组件，做为组件的基本单元。
• 传统前端框架/类库的思想是先组织DOM，而后把某些可复用的逻辑封装成组件来操做DOM，是DOM优先，而组件化框架/类库的思想是先来构思组件，而后用DOM这种基本单元结合相应逻辑来实现组件，是组件优先。这是二者最本质的区别。
• 目前市场上的组件化框架最多，主要的有Vue，React，Angular2。

 

自动化：

“简单重复的工做交给机器来作”，自动化也就是有不少自动化工具代替咱们来完成，例如持续集成、自动化构建、自动化部署、自动化测试等等。

 

 规范化：（相当重要的一环）

在项目规划初期制定的好坏对于后期的开发有必定影响。包括的规范有：

• 目录结构的制定
• 编码规范
• 先后端接口规范
• 文档规范
• 组件管理
• Git分支管理
• Commit描述规范
• 按期codeReview
• 视觉图标规范