前端工程化

Posted 2022-07-04 ygunoil

前段工程化可以分成四个块来说，分别为

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

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

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

  1. 通常，我们会需要对页面进行拆分，将其拆分成一个一个的零件，然后分别去实现这一个个零件，最后再进行组装。
  2. 在我们的实际业务开发中，对于组件的拆分我们需要做不同程度的考量，其中主要包括细粒度和通用性这两块的考虑。
  3. 对于业务组件，你更多需要考量的是针对你负责业务线的一个适用度，即你设计的业务组件是否成为你当前业务的 “通用” 组件，比如我之前分析过的权限校验组件，它就是一个典型的业务组件。感兴趣的小伙伴可以点击 传送门 自行阅读。

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

  1. 项目目录结构
  2. 编码规范：对于编码这块的约束，一般我们都会采用一些强制措施，比如 ESLint、StyleLint 等。
  3. 联调规范：这块可参考我以前知乎的回答，前后端分离，后台返回的数据前端没法写，怎么办？
  4. 文件命名规范
  5. 样式管理规范：目前流行的样式管理有 BEM、Sass、Less、Stylus、CSS Modules 等方式。
  6. git flow 工作流：其中包含分支命名规范、代码合并规范等。
  7. 定期 code review
  8. … 等等

  以上这些，我之前也写过一篇文章做过一些点的详细说明，TypeScript + 大型项目实战

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

而，处于其中任何一个块都属于前端工程化。