工程化面试题
代码规范
ESLint 和 Prettier 的区别？
ESLint：
- 代码质量检查
- 发现潜在问题
- 可配置规则
Prettier：
- 代码格式化
- 统一代码风格
- 自动格式化
配合使用：
- ESLint 负责代码质量
- Prettier 负责代码格式
- 使用
eslint-config-prettier避免冲突
如何配置 Git Hooks？
使用 Husky：
npm install --save-dev husky
npx husky install
Pre-commit：
# .husky/pre-commit
npm run lint
npm run test
lint-staged：
{
"lint-staged": {
"*.{js,jsx}": ["eslint --fix", "prettier --write"]
}
}
Commit 规范有哪些？
Conventional Commits：
feat：新功能fix：修复 bugdocs：文档变更style：代码格式refactor：重构perf：性能优化test：测试chore：构建工具
Monorepo
什么是 Monorepo？
定义：
- 多个项目放在一个仓库
- 共享代码和配置
- 统一管理依赖
优势：
- 代码复用方便
- 统一版本管理
- 原子性提交
劣势：
- 仓库体积大
- 权限管理复杂
- 构建时间长
Monorepo 工具有哪些？
Lerna：
- 传统的 Monorepo 工具
- 管理包版本
- 发布包
Nx：
- 更快的构建
- 更好的缓存
- 依赖图可视化
Turborepo：
- 增量构建
- 并行执行
- 远程缓存
如何选择 Monorepo 工具？
选择 Lerna 如果：
- 项目较小
- 需要简单的包管理
选择 Nx 如果：
- 项目较大
- 需要构建优化
- 需要依赖图
选择 Turborepo 如果：
- 需要最快的构建速度
- 需要远程缓存
构建工具
如何优化构建速度？
方法：
- 使用缓存
- 并行构建
- 增量构建
- 使用 esbuild
- 减少插件
如何优化构建产物？
方法：
- 代码分割
- Tree Shaking
- 代码压缩
- 资源优化
- 使用 CDN
CI/CD
什么是 CI/CD？
CI (Continuous Integration)：
- 持续集成
- 自动构建和测试
- 快速发现问题
CD (Continuous Deployment)：
- 持续部署
- 自动部署到生产环境
CI/CD 流程是什么？
流程：
- 代码提交
- 触发 CI
- 运行测试
- 构建项目
- 部署到测试环境
- 部署到生产环境
常用的 CI/CD 工具有哪些？
GitHub Actions：
name: CI
on: [push]
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- run: npm install
- run: npm test
Jenkins：
- 可配置性强
- 插件丰富
- 适合复杂场景
GitLab CI：
- 集成在 GitLab
- 配置简单
- 适合 GitLab 项目
代码审查
Code Review 的重要性？
好处：
- 发现 bug
- 提升代码质量
- 知识分享
- 统一代码风格
Code Review 应该关注什么？
关注点：
- 功能是否正确
- 代码是否清晰
- 是否有性能问题
- 是否有安全漏洞
- 测试是否充分
组件库开发
如何开发组件库？
步骤：
- 搭建项目结构
- 配置构建工具
- 编写组件
- 编写文档
- 编写测试
- 发布包
组件库的构建配置？
Rollup 配置：
export default {
input: 'src/index.ts',
output: [
{ file: 'dist/index.esm.js', format: 'es' },
{ file: 'dist/index.cjs.js', format: 'cjs' },
],
external: ['react'],
};
如何维护组件库？
方法：
- 版本管理（Semantic Versioning）
- 文档维护
- 测试覆盖
- 更新日志
- 社区反馈
最佳实践
前端工程化的核心是什么？
核心：
- 代码规范
- 构建优化
- 自动化测试
- 持续集成
- 文档完善
如何提升团队开发效率？
方法：
- 统一代码规范
- 使用 Monorepo
- 自动化流程
- 代码审查
- 知识分享