前端工程化初探

落日映苍穹つ 2023-01-07 07:09 192阅读 0赞

![677cea36e451d79e347cfd39a3c28c4b.png][]

# 摘要 #

前端工程化可以分成四个方面来说，分别为模块化、组件化、规范化和自动化。

# 模块化 #

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

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。这些自动化工具在自动化合并、构建、打包都能为我们节省很多工作。而这些只是前端自动化其中的一部分，前端自动化还包含了持续集成、自动化测试等方方面面。

[677cea36e451d79e347cfd39a3c28c4b.png]: /images/20221119/e0d5229733e44b5ba8ae0c7f69eb9676.png