前端工程化概述

摘要

前端工程化能够分红四个方面来讲，分别为模块化、组件化、规范化和自动化。

模块化

模块化是指将一个文件拆分红多个相互依赖的文件，最后进行统一的打包和加载，这样可以很好的保证高效的多人协做。其中包含

• JS 模块化：CommonJS、AMD、CMD 以及 ES6 Module。
• CSS 模块化：Sass、Less、Stylus、BEM、CSS Modules 等。其中预处理器和 BEM 都会有的一个问题就是样式覆盖。而 CSS Modules 则是经过 JS 来管理依赖，最大化的结合了 JS 模块化和 CSS 生态，好比 Vue 中的 style scoped。
• 资源模块化：任何资源都能以模块的形式进行加载，目前大部分项目中的文件、CSS、图片等都能直接经过 JS 作统一的依赖关系处理。

组件化

不一样于模块化，模块化是对文件、对代码和资源拆分，而组件化则是对 UI 层面的拆分。

一般，咱们会须要对页面进行拆分，将其拆分红一个一个的零件，而后分别去实现这一个个零件，最后再进行组装。 在咱们的实际业务开发中，对于组件的拆分咱们须要作不一样程度的考量，其中主要包括细粒度和通用性这两块的考虑。 对于业务组件，你更多须要考量的是针对你负责业务线的一个适用度，即你设计的业务组件是否成为你当前业务的 “通用” 组件。

规范化

正所谓无规矩不成方圆，一些好的规范则能很好的帮助咱们对项目进行良好的开发管理。规范化指的是咱们在工程开发初期以及开发期间制定的系列规范，其中又包含了

• 项目目录结构
• 编码规范：对于编码这块的约束，通常咱们都会采用一些强制措施，好比 ESLint、StyleLint 等。
• 联调规范
• 文件命名规范
• 样式管理规范：目前流行的样式管理有 BEM、Sass、Less、Stylus、CSS Modules 等方式。
• git flow 工做流：其中包含分支命名规范、代码合并规范等。
• 按期 code review … 等等

自动化

从最先先的 grunt、gulp 等，再到目前的 webpack、parcel。这些自动化工具在自动化合并、构建、打包都能为咱们节省不少工做。而这些只是前端自动化其中的一部分，前端自动化还包含了持续集成、自动化测试等方方面面。