工程化实践
为了面对日益复杂的业务场景和代码逻辑，前端工程化势在必行。工程化的程度越高，在工作中因人的个体差异性导致的缺陷或者短板就会越少，项目质量可以得到更有效的保障。
# 1.模块化
模块化可以对复杂逻辑进行有效分割，每个模块更关注自身的功能，模块内部的数据和实现是私有的，通过向外部暴露一些接口来实现各模块间的通信。
# JS模块化
目前主流的模块规范有：AMD、CMD、CommonJS、ES6-module。《JS模块化介绍》
# CSS模块化
CSS模块化主要依赖LESS、SASS、Stylus等预处理器实现，我们可以使用变量、运算、函数，@import指令可以轻松合并文件。除了使用预处理器，还可以使用：
- postcss
- CSS in JS
- CSS Modules
但各种预处理器和工具并不能完全解决全局作用域的问题，需要结合namespace的思想去命名。目前流行的命名规范：BEM
# 2.组件化
当项目变得越来越复杂的时候，抽离出公共的逻辑和组件，显得特别重要，这也是项目性能优化重要的一部分。
React、Vue、Angular等框架的流行推动了 Web 组件化的进程。它们都是数据驱动型（MVVM），不同于DOM操作是碎片的命令式，它允许将两个组件通过声明式编程建立内在联系。
# 3.规范化
规范化是保障项目质量的一个重要环节，可以很好地降低团队中个体的差异性。
# 代码规范
Javascript 代码风格指南
- standard 风格指南。 适用于常规技术选型的项目。
- Vue 项目风格指南。 适用于技术选型为Vue的项目。
- React 项目风格指南。 适用于技术选型为React的项目。
- 其他库/框架风格指南。适用于其他框架作为技术选型的项目。
CSS代码风格指南
- standard 风格指南。 适用于 CSS/LESS 的样式风格检查。
- SASS 风格指南。 适用于 SASS 的样式风格检查。
规范工具
# 流程规范
当团队在开发时，通常会使用版本控制系统来管理项目，常用的有svn和git，如何合并代码、如何发布版本都需要相应的流程规范，这可以让我们规避很多问题，比如合并代码后出现代码丢失，又或者将别人未经测试的代码发布出去等等。以下几种都是基于git的协作开发模式：
git的协作开发模式
协作开发工具
- husky + lint-staged：可以注册git hooks，拦截一些错误的提交
# 文档规范
高质量的项目文档可以提高团队协作效率，便于后期优化维护。
- JSDoc：根据.js文件中的注释信息，生成API文档。
- Docz：基于MDX的高效、零配置的文档生成工具，目前仅支持React。
- Storybook：集组件开发、查看、测试的文档工具，支持React、RN、Vue、Angular、Polymer等很多框架，非常强大。
- react-styleguidist：和Storybook类似，生成React组件开发环境的文档服务，基于webpack支持HRM。
# 4.自动化
自动化包含构建、测试、发布三大方面。
# 自动构建
构建一般包括这几个步骤：
- 代码转换：允许使用更高级的JavaScript语法，比如ES6、TypeScript等等，这对代码的开发和可维护性来说是非常有好处的。
- 模块合并：按模块化开发的代码需要进行打包合并。
- 文件优化：常见的有代码压缩和Code Splitting，使用ES6 module的模块化机制的还可以考虑构建工具的Tree Shaking功能，进一步减少代码体积。
- 自动刷新：在开发过程中支持file watch和HMR都是可以很好地提升开发效率。
# 打包构建工具：
- webpack：JavaScript 应用程序的静态模块打包工具
- gulp：基于流(stream)的自动化构建工具
- grunt：JavaScript 世界的构建工具
- Parcel：极速零配置Web应用打包工具
- Rollupjs： JavaScript 模块打包器
# 自动测试
前端测试可以分为单元测试和集成测试。可以使用一下几种工具达到自动测试：
# 自动部署
自动部署，可以写一个自动化脚本，也可以借助工具实现。
# 自动部署工具
参考文章