课程简介
《前端基础建设与工程化设计》课程从项目组织协同、依赖管理方案、核心技术选型、开发构建工作流设计、工程化架构思路、持续集成部署等角度出发,深度剖析前端基础建设和工程化架构的现代化方案。
课程中既有优秀工程案例分析,也有源码级深入解读;既有工具链整合方案,也有体系化协同串联。能够帮助学习者快速理解工程化方案,进而能够打造自动化、智能化的基础建设方案,以及顺滑流畅的工作流机制。
目标收益
• 理解业务开发中很少涉及到的编译流程
• 从基础建设和工程化角度,提升开发效率
• 从基础建设和工程化角度,优化应用性能
• 开拓技术视野,理解现代化前端工程设计方案
• 脱离重复琐碎的业务开发,系统地了解基础建设的方方面面
• 理解前端构建工具(如 Webpack)实现细节和原理
• 更好地从零搭建一个优秀的项目,整合工作流程
培训对象
• 3 年以上经验的前端开发工程师
• 面临技术瓶颈的前端团队
• 负责技术方案制定和基础建设的资深工程师
• 缺少新技术指引、缺少接触优秀项目机会的前端团队
课程大纲
前端编译原理知识介绍 |
– 解读 AST(抽象语法树) – 基于 AST,理解工程化雏形(实践) |
前端生态和包管理方案解析 |
– NPM 原理解析 • Yarn 方案介绍 – Package.json 重要字段介绍 |
串联前端工具,打造自动化流程 |
– 构建工具介绍和方案对比 – 解析 Babel 生态 – Webpack 实践指南(实践) – Rollup 实践指南(实践) – 动手实现构建工具(实践) |
落地规范和测试方案,完善基础建设流程 |
– Lint 方案解析 – 测试方案解析 – 绑定 Git hooks,融合 Prettier, ESLint 以及测试方案(实践) |
抽象基础建设,提供工程一体化方案 |
– Create-react-app 原理解析 – 实现企业级脚手架 |
现代化工程方案原理介绍和实践 |
– Tree shaking 优化原理和实践(实践) – 优化代码分割方案,解析按需加载和打包(实践) – 解析压缩和混淆 – 通过构建分析,提升开发效率和应用性能(实践) – 无打包方案原理与实践(实践) – Monorepo 架构设计 – 漫谈 CI/CD 与 DevOps |
前端编译原理知识介绍 – 解读 AST(抽象语法树) – 基于 AST,理解工程化雏形(实践) |
前端生态和包管理方案解析 – NPM 原理解析 • Yarn 方案介绍 – Package.json 重要字段介绍 |
串联前端工具,打造自动化流程 – 构建工具介绍和方案对比 – 解析 Babel 生态 – Webpack 实践指南(实践) – Rollup 实践指南(实践) – 动手实现构建工具(实践) |
落地规范和测试方案,完善基础建设流程 – Lint 方案解析 – 测试方案解析 – 绑定 Git hooks,融合 Prettier, ESLint 以及测试方案(实践) |
抽象基础建设,提供工程一体化方案 – Create-react-app 原理解析 – 实现企业级脚手架 |
现代化工程方案原理介绍和实践 – Tree shaking 优化原理和实践(实践) – 优化代码分割方案,解析按需加载和打包(实践) – 解析压缩和混淆 – 通过构建分析,提升开发效率和应用性能(实践) – 无打包方案原理与实践(实践) – Monorepo 架构设计 – 漫谈 CI/CD 与 DevOps |