【前端工程化面试题】常见的前端构建工具有哪些？请讲一下他们的应用场景？

视频讲解

www.bilibili.com/video/BV1x2…

一、考察点

1. 构建工具是前端工程化基础，可以说是无构建工具不工程化
2. 此题主要考察大家的对工程化知识的了解程度
3. 另外，后半句涉及到了技术选型，也顺便考察大家思维的逻辑性和系统性。

一、知识梳理

什么是构建工具？

前端构建工具是一种针对前端开发的构建工具，用于自动化前端项目的构建过程。

• 源代码转换为可在浏览器中运行的HTML、CSS和JavaScript代码
• 支持插件扩展
• 丰富的配置功能
• 压缩、丑化、合并等优化功能

构架工具历史

• 手工构建时代 - 代码压缩、图片压缩、代码合并

  • 无

• 自动化构建时代 - 任务流工具：

  • Grunt：一种基于任务流的前端构建工具，可以帮助自动化执行编译、压缩、合并等操作。
  • Gulp：一种基于任务流的前端构建工具，可以帮助自动化执行编译、压缩、合并等操作。

• 模块化构建时代 - 模块打包器：

  • Webpack：目前最流行的构建工具之一，它是一个模块打包器，可以将多个JavaScript文件打包成一个文件，并且支持处理CSS、图片等资源文件。Webpack具有丰富的插件生态系统和配置选项，可以满足各种复杂的构建需求。
  • Rollup：专门用于打包JavaScript库的构建工具，它支持ES modules，并且在构建过程中能够去除未使用的代码，因此生成的代码体积更小。

• Bundless构建时代 - 前端调试器(Bundless):

  • Snowpack:采用 ESM（ECMAScript 模块）作为默认格式，可以实现快速且轻量级的构建。
  • Vite: 利用ES模块和浏览器原生的动态import功能，实现了快速的冷启动和热更新。

二、回答范例 - 总分总结构

• 概括：

  • 常见的构建工具主要是Webpack、和Rollup这种打包器
  • 在老项目中还会看到Grunt和Gulp这种基于工作流的构建工具
  • 当然新还有一种Vite这种Bundlerless这种高效的高效的构建工具

• 阐述：

  • Webpack的特点是

    • 应用广泛、生态鉴权特别适合在项目型项目使用
    • 在新的4.0和5.0版本中比如现在流行的Treesharking这种新特性也有支持

  • Rollup：

    • 是特别适合类型库型项目的开发，比如组件库。比如常见的ElementUI和Vue都是使用它作为构建工具

  • Vite：是一种新型的构建工具，开发的时候使用Bundless方式启动快速，开发体验好。而且作为Vue的亲儿子。未来对Vue3.0的支持也肯定能够得到很好的保证

• 总结： 这三个流行的框架生态体系都很健全，而且也都有相当多的成功案例。

  • 在现行上我推荐从应用场景出发：

    • 项目型： 尤其是核心项目选择 Webpack，强调可靠性
    • 类库型： Rollup
    • 非核心项目： 可以尝试Vite

三、思路点拨

• 考察点：

  • 确认前端工程化知识的广度
  • 打开话题

• 表达技巧： 总分总

  • 概括
  • 阐述
  • 总结