C菜鸟教程-菜鸟网博客-为草根创业提供网络知识
热门搜索 AI Python React Docker MySQL Rust
首页/专题/前端工程化实战
系列专题 · 12 篇文章

前端工程化实战

从项目初始化到 CI/CD 部署，系统性地掌握前端工程化的每个环节。本专题共 12 篇文章，从构建工具、代码质量、自动化测试到部署策略，每篇都附带可运行的代码示例。已更新 4 篇，持续连载中。

3.2k 次阅读 2026 年 6 月更新 订阅 268 人 评分 4.8 / 5
12
总文章数
4
已发布
3,256
总阅读量
89%
读者完成率
精选推荐

从零搭建基于 Vite + TypeScript 的现代前端项目

阅读 8 分钟 · 包含完整模板项目 · 1,280 次阅读

学习路线图

当前阶段: 基础工具链 · 总进度 33%
✓
基础工具链
5 篇 · 已完
2
代码质量
3 篇 · 进行中
3
测试与 CI
2 篇 · 未开始
4
部署与运维
2 篇 · 未开始
全部 入门 进阶 高阶
1

从零搭建基于 Vite + TypeScript 的现代前端项目

2026-06-01 8 分钟 1.2k 12 ② 代码示例

一个标准化的项目脚手架，包含 ESLint、Prettier、Husky 和 commitlint 的配置最佳实践，附完整模板项目。

已发布 入门
2

ESLint 与 Prettier 深度配置：打造团队统一的代码风格

2026-06-05 10 分钟 856 8

从规则定制到自动修复，从 CI 检查到编辑器集成，打造不可逆的统一代码风格工作流。

已发布 入门
3

Vitest 单元测试从入门到精通：覆盖率、Mock 与快照测试

2026-06-10 12 分钟 638 15 ③ 代码示例

Vitest 是 Vite 生态的原生测试框架。系统讲解测试策略、组件测试和 API Mock 的最佳实践。

已发布 进阶
4

GitHub Actions 自动化工作流：CI/CD 从配置到落地

2026-06-15 7 分钟 562 6

多环境部署、自动化发布、集成测试——用 GitHub Actions 构建完整的 CI/CD 流水线，从零到生产。

已发布 进阶
5

Webpack Module Federation 微前端实战

即将发布

如何使用 Module Federation 搭建生产可用的微前端架构，实现跨应用的模块共享和版本管理。

即将发布 高阶
6

Monorepo 工程化实践：Turborepo + pnpm

即将发布

从搭建到部署，完整讲解 Monorepo 的最佳实践，包括依赖管理、构建缓存和发布策略。

即将发布 进阶
7

Rollup 插件开发指南：从打包到发布的完整链路

即将发布

深入 Rollup 插件机制，从简单的虚拟模块到复杂的代码转换，构建专用的构建插件。

即将发布 高阶
8

端到端测试实战：Playwright 跨浏览器自动化

即将发布

从页面对象模型到可视化回归测试，用 Playwright 构建工业级 E2E 测试套件。

即将发布 进阶

本专题相关问题

24 票
Vite 项目如何迁移到 Webpack 5？
3 个回答构建工具迁移
18 票
ESLint flat config 和 eslintrc 有什么区别？
5 个回答ESLint配置
12 票
CI 流水线中测试覆盖率阈值如何设置？
2 个回答CI/CD测试

读者笔记 · 社区划线评论

24 条笔记
"Husky + lint-staged 这套组合拳在团队协作时真的能救命，之前每次 review 都在修格式，现在 CI 直接拦住了。"
张野 · 对文章 #1 · 2 天前
"Vitest 的 in-source testing 模式是真正的黑科技，测试和实现写在一起，重构时测试也不会忘。"
李明 · 对文章 #3 · 5 天前
"GitHub Actions 的 matrix strategy 并行跑 6 个版本的 Node，之前手动配 Jenkins 累死了。"
王磊 · 对文章 #4 · 1 周前

专题讨论 · 此专题下的讨论

查看全部 18 条 →
陈晓
刚按第一篇搭建好模板，eslint + prettier 配合 VSCode 保存自动格式化，体验太好了。想问下 monorepo 那篇什么时候出？
3 小时前 · 回复
CodePress 团队
感谢反馈 🙌 Monorepo 篇正在撰写中，预计两周内发布。可以先关注 Turborepo 的官方文档。
1 小时前 · 回复
赵岩
Vitest 那篇的 coverage 配置我跑出来一直报错，有人遇到同样问题吗？
2 天前 · 3 条回复
前端工程化实战
12 篇文章 · 预计总阅读 96 分钟
作者: CodePress 团队
难度
中高级
数据概览
268
订阅者
4.8
评分
89%
完成率
3.2k
总阅读
文章目录
1. 从零搭建 Vite + TS 项目 2. ESLint + Prettier 深度配置 3. Vitest 单元测试入门到精通 4. GitHub Actions CI/CD 落地 5. Webpack Module Federation 6. Monorepo 工程化实践 7. Rollup 插件开发指南 8. Playwright E2E 测试实战
作者团队
张野
主编 · 全栈工程师
6 篇
李明
高级前端工程师
3 篇
王磊
DevOps 工程师
2 篇
陈晓
测试架构师
1 篇
配套仓库
codepress/vite-starter TypeScript · 更新于 3 天前
★ 128
codepress/fe-engineering JavaScript · 所有示例代码
★ 56
标签
Vite TypeScript ESLint Vitest CI/CD Webpack Monorepo Rollup Playwright Docker
相关专题
AI 大模型应用开发 8 篇文章
Rust 系统编程入门 6 篇文章
DevOps 工具链实战 10 篇文章
配套资源
vite-starter-template.zip 2.4 MB · v1.2
eslint-config-codepress npm 包 · v0.3
cheatsheet-frontend-ci.pdf 1.1 MB · v1.0
贡献者排行
1
张野
6 篇文章 · 12,840 次阅读
↑ 2
2
李明
3 篇文章 · 6,240 次阅读
↑ 1
3
王磊
2 篇文章 · 4,180 次阅读
—
4
陈晓
1 篇文章 · 1,920 次阅读
↓ 1
订阅专题更新
有新文章发布时第一时间通知你

你可能感兴趣的专题

Rust 系统编程入门

从所有权机制到并发编程，系统掌握 Rust 语言核心 · 6 篇文章

AI 大模型应用开发

从 Prompt Engineering 到 RAG 架构，构建 AI 原生应用 · 8 篇文章

DevOps 工具链实战

Docker、Kubernetes、Terraform 生产级配置与优化 · 10 篇文章