如何做好“前端工程”？前端工程就是让前端开发“自成一体”。个人认为应该从四个方面来考虑：模块化、组件化、标准化、自动化。1.模块化1.JS的模块化拆分，大业务逻辑的封装，公共函数的抽取等2.CSS的模块化虽然SASS、LESS、Stylus等预处理器已经实现了CSS文件拆分，但是CSS的一个重要问题模块化没有解决：选择器的全局污染问题。按理说，模块化文件应该隐藏内部作用域，只向用户暴露少量接口。但是，按照目前的预处理器方式，导入一个CSS模块后，已有的样式存在被覆盖的风险。虽然覆盖样式是CSS的优势，但不利于多人协作。3.资源模块化资源模块化后，简化了依赖关系。CSS、图片等所有资源的依赖统一走JS路由，无需额外处理CSS预处理器的依赖，无需处理图片合并、字体图片等路径问题等代码迁移过程中；资源处理是集成的。现在你可以使用loader对各种资源做各种事情，比如复杂的vue-loader等；项目结构清晰。使用Webpack后，你的项目结构总是可以表达为这样一个函数：dest=webpack(src,config)2.组件化1.从UI中分离出来的每一部分包含模板（HTML）+样式（CSS）+逻辑（JS）一个功能齐全的结构单元，我们称之为组件。2、组件化≠模块化。模块化只是在文件级别拆分代码或资源；组件化是UI（用户界面）在设计层面的拆分3.标准化标准化其实是工程化中很重要的一个环节。初始规范制定的质量将直接影响后期开发的质量。例如：1、目录结构的制定2、目录结构的合理设置可以给项目带来很多好处：有助于提高项目逻辑结构的合理性；相应的拓展与合作；便于资源的统一定位和管理。3.编码标准制定一套好的编码标准可以加强团队开发协作，提高代码质量。推荐参考O2ConvexLabs创建的前端代码规范。编码规范包括：1.HTML规范。基于W3C、AppleDevelopers等官方文档，结合团队业务和开发过程中总结的规范约定，页面的HTML代码更加语义化。2.CSS规范。统一团队CSS代码编写风格，使用CSS预编译语言语法风格，提供通用的媒体查询语句和浏览器私有属性引用，从业务层面统一规范常用模块的引用。3.JS规范。统一团队CSS代码编写风格，使用CSS预编译语言语法风格，提供通用的媒体查询语句和浏览器私有属性引用，从业务层面统一规范常用模块的引用。4.图片规格。了解各种图片格式的特点，根据特点制定图片规范，包括但不限于图片质量协议、图片导入方式、图片合并处理等，旨在从图片层面优化页面性能。5.命名规范。从目录、图片、HTML/CSS文件、ClassName的命名，对团队的命名习惯进行约定和规范，增强团队代码的可读性。6、前后端接口规范“基于Ajax带来的SPA时代”。在这种模式下，前后端分工非常明确，前后端协作的关键点就是Ajax接口，在没有任何接口协议和规范的情况下，各自撸起袖子干。因此，在产品项目开发过程中，前后端接口联调对接的工作量约占30%-50%，甚至更高。往往前后端接口的联调对接、系统间的联调对接是整个产品项目开发的薄弱环节。接口规范的主要初衷是先规范协议，尽量避免因交流和联调带来不必要的问题，让大家愉快地专注于各自擅长的领域。7.文档规范8.组件管理9.Git分支管理10.Commit描述规范11.可视化图标规范4.自动化前言：前端工程的很多脏活累活都应该由自动化工具完成。一个需要坚持的理念是：任何简单的机械重复性工作都应该由机器完成。1.持续继承2.自动化构建3.自动化部署4.自动化测试以上是关于如何做前端工程的一些具体参考
