前端工程化（前端工程化面试题）



什么是前端工程化 

        前端工程化是现代Web开发的重要趋势，旨在通过标准化、模块化和自动化的手段，提高开发效率、代码质量和项目可维护性。

        最早的前端开发就是实现页面，顶多再写写JS让页面可以有交互的特效。属于前后端未分离的时代。但是随着需求的增加，我们不仅要做Web应用，还要做App、小程序以及各种端。前后端分离的时代开始，在这种需求日增的情况下，必须得考虑一种新的方式，优化前端的开发工作，例如，解决代码冗余，项目可维护性，提升版本迭代速度等等一系列的问题。前端工程化的概念也就是在这中情况下被提出了。

1. 前端发展历史

    看下面流程图我们可以看出来

• 第一阶段：前端最早期的只是HTML、CSS、JS(此时只是前端发展的一个雏形，【JS】还没有模块化的概念)，随着页面发展我们发现一个页面引入太多JS脚本，将大大增加维护成本；
• 第二阶段：已经出现了模块的概念，会按照模块的概念进行拆分，我们如何拆分模块，如何放置这些模块？此时已经有了一个工程化的概念；
• 第三个阶段：模块已经划分出来，但是我们部署的时候还是想合并在一起，就涉及到了早起的打包处理；
• 第四个阶段：前端进一步复杂之后，前端需要承载的功能更多了，逐步开始进行前后端分离，前端也可以独立的开发了。此时前端也出来了一些新的概念，比如说：SPA、Angular、Vue等。此时就要开始考虑路由如何规划？开发时如何调试？开发完如何构建？构建完如何发布？这一切的东西才构成了【前端工程化的概念】；

​
        综上所述我们可以看出来，前端工程化绝不只是webpack或babel构建这一块，前端工程化是一个整体，从前端开始写代码 --> 如何构建 --> 如何发布测试 --> 如何上线 --> 上线后的应用状态如何监控等，这一套的流程我们把他叫做【前端工程化】。

工程化的意义 

         前端工程化的主要目标就是解放生产力、提高生产效率。通过制定一系列的规范，借助工具和框架解决前端开发以及前后端协作过程中的痛点和难度问题。

        Web业务日益复杂化和多元化，现在随便找个前端项目，都已经不是过去的拼个页面+搞几个jQuery插件就能完成的了。代码量可能从以前的千行到如今的万行，甚至十万行。人数从一个人变成了N个一起协作开发。所以在业务上，我们要去思考这些复杂和多元的场景，而产生的问题，如：

• 如何扩展javascript、html、css本身的语言能力
• 如何进行高效的多人协作
• 如何解决功能复用和变更问题
• 如何保证项目的规范性
• 如何实现重复的劳动简单化

要实现前端工程化，就要解决以上的几个问题。

前端工程化实践

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

  模块化

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

• 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。这些自动化工具在自动化合并、构建、打包都能为我们节省很多工作。而这些只是前端自动化其中的一部分，前端自动化还包含了持续集成、自动化测试等方方面面。持续集成（CI）和持续部署（CD）是现代开发流程的重要组成部分，可以使用GitHub Actions来实现自动化构建和部署。

实现工程可以从这四个方面入手

以上就是我所了解的前端工程化，以工程的角度去理解我们的web前端

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdkf/14144.html