前端工程化！你了解多少？

什么是前端工程化？

一切能够提升前端开发效率，提高前端应用质量的手段和工具都是前端工程化。

如何做前端工程化？

前端工程化就是为了让前端开发能够自成体系，所以我看来应该从模块化 组件化 规范化 自动化 四个方面来说说。

模块化

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

JS模块化

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

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

1. 用++Webpack + Babel++将所有模块打包成一个文件同步加载，也可以搭乘多个chunk异步加载；
2. 用++System+Babel++主要是分模块异步加载；
3. 用浏览器的< script type=“module”>加载。

css模块化

CSS Modules 原理：使用JS来管理样式模块，它能够最大化的结合CSS 生态 和 JS模块化能力，通过在每个class、名后带一个独一无二的hash值，这样就不存在有全局命名冲突的问题了。
webpack 自带的 css-loader 组件，自带了CSS Modules 。

   {
    test: /\.css$/,
    loader: "css?modules&localIdentName=[name]__[local]--[hash:base64:5]"
   }

组件化

从UI拆分下来的 每个包含模块(HTML) + (css) + (JS)功能完备的结构单元

组件化不等于模块化。模块化只是在文件层面上，对代码或资源的拆分；而组件化是在设计层面上，对UI的拆分。

规范化

1. HTML规范。
基于 W3C、苹果开发者 等官方文档，并结合团队业务和开发过程中总结的规范约定，让页面HTML代码更具语义性。
2. CSS规范。
统一规范团队 CSS 代码书写风格和使用 CSS 预编译语言语法风格，提供常用媒体查询语句和浏览器私有属性引用，并从业务层面统一规范常用模块的引用。
3. JS规范。
统一规范团队 CSS 代码书写风格和使用 CSS 预编译语言语法风格，提供常用媒体查询语句和浏览器私有属性引用，并从业务层面统一规范常用模块的引用。
4. 图片规范。
了解各种图片格式特性，根据特性制定图片规范，包括但不限于图片的质量约定、图片引入方式、图片合并处理等，旨在从图片层面优化页面性能。
5. 命名规范。
从 目录、图片、HTML/CSS文件、ClassName 的命名等层面约定规范团队的命名习惯，增强团队代码的可读性。

自动化

任何简单机械的重复劳动都应该让机器去完成。

1. 图标的合并
2. 自动化测试
3. 自动化提交代码
4. 自动化检查命名规范
5. 自动化格式代码格式