前端工程化面试题

对前端工程化的理解

前端工程化是一套方法论和工具链的集合，核心目标是通过标准化、自动化和流程化提升开发效率、保障代码质量、并支撑大型应用的开发。它主要解决了以下几个问题：

• 开发效率：通过脚手架、热更新等工具，快速创建项目和获得即时反馈
• 代码质量：通过 ESLint、Prettier、Husky 等工具强制统一代码规范，并在提交前拦截问题
• 研发协同：统一的目录结构、开发规范、构建流程使得团队协作更顺畅
• 重复劳动：通过自动化构建（编译、压缩、打包）、自动化部署（CI/CD）解放人力
• 资源管理：通过模块化、组件化管理和复用代码；通过打包工具处理依赖、合并资源、优化性能

CI/CD 流程是怎样的

主要是流程的使用者，基于 GitLab CI 和 Jenkins 的流程大致如下：

• 提交代码：开发者在特性分支开发，提交 Pull/Merge Request
• CI（持续集成）：MR 触发 CI 流水线，自动执行：
  • npm install 安装依赖
  • npm run lint 代码规范检查
  • npm test 运行单元测试
  • npm run build 执行构建，这一步很关键，用于检查代码是否能成功编译。只有 CI 阶段全部通过，才允许合并代码到主分支
• CD（持续部署）：代码合并到主分支后，自动触发 CD 流水线：
  • 拉取最新代码，执行构建，生成生产环境用的 dist 目录
  • 将 dist 产物部署到测试/预发布环境，进行 QA 测试
  • 测试通过后，手动点击（或自动）部署到生产环境

模块化和组件化的区别和联系

它们都是‘分治’思想的体现，但关注点不同：

• 模块化更偏向代码组织层面。它的粒度可大可小，主要目的是解耦和复用。一个工具函数、一个 JSON 文件、一个 Class 都可以是一个模块。核心是语法和依赖管理。
• 组件化更偏向 UI 界面层面。它的粒度通常更大，主要目的是复用和封装。一个按钮、一个弹窗、一个页面都是一个组件。它的核心是视图（模板）、逻辑（状态、方法）和样式的独立单元。

联系在于：一个复杂的组件内部，必然会使用模块化的方式来组织其代码；多个模块组合起来，可以构成一个组件。在现代框架（如 React/Vue）中，一个文件就是一个模块，这个模块默认导出的就是一个组件，两者完美融合。

为什么 pnpm 比 npm 快

pnpm 比 npm 快的原因在于其优化的文件存储方式、依赖管理方式以及并行下载能力：

• pnpm 使用基于内容寻址的文件系统来存储磁盘上的所有文件，这意味着它不会在磁盘中重复存储相同的依赖包，即使这些依赖包被不同的项目所依赖。这种存储方式使得 pnpm 在安装依赖时能够更高效地利用磁盘空间，同时也减少了下载和安装的时间

• pnpm 在下载和安装依赖时采用了并行下载的能力，这进一步提高了安装速度

• pnpm 还具有其他特性，例如节省空间的硬链接和符号链接的使用、这些都有助于提高其性能

• npm

• yarn

• pnpm

说一下对 Monorepo 的理解

在项目中怎么做 Monorepo

ESLint 概念及原理

npm install 的执行过程

npm run start 的整个过程

对 CSS 工程化的理解