1.什么是前端工程化
- 前端工程化是使用软件工程的技术和方法来进行前端的开发流程、技术、工具、经验等规范化、标准化。
2.前端工程化的目的
- 为了提高效率和降低成本，即提高开发过程中的开发效率，减少不必要的重复工作时间。
3.如何做前端工程化
- 模块化
简单来说，模块化就是将一个大文件拆分成相互依赖的小文件，再进行统一的拼装和加载。
- JS的模块化
> 在ES6之前，JavaScript一直没有模块系统，这对开发大型复杂的前端工程造成了巨大的障碍。对此社区制定了一些模块加载方案，如CommonJS、AMD和CMD等。现在ES6已经在语言层面上规定了模块系统，完全可以取代现有的CommonJS和AMD规范，而且使用起来相当简洁，并且有静态加载的特性。
- css的模块化
> 虽然SASS、LESS、Stylus等预处理器实现了CSS的文件拆分，但没有解决CSS模块化的一个重要问题：选择器的全局污染问题。为了避免全局选择器的冲突，需要制定CSS命名风格：如BEM风格等，但是这毕竟是弱约束。从工具层面，社区又创造出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的强大之处不仅仅在于它统一了JS的各种模块系统,更重要的是它的万能模块加载理念，即所有的资源都可以且也应该模块化。
- 资源模块化后，优点是依赖关系单一化;资源处理集成化;项目结构清晰化;
- 组件化
从UI拆分下来的每个包含模板(HTML)+样式(CSS)+逻辑(JS)功能完备的结构单元，我们称之为组件。
组件化≠模块化。模块化只是在文件层面上，对代码或资源的拆分；而组件化是在设计层面上，对UI（用户界面）的拆分。
-
规范化
- 目录结构的制定
- 编码规范
- 前后端接口规范
