首页实战自主搭建5个精品脚手架，助力前端研发全流程提效章节目录

自主搭建5个精品脚手架，玩转前端提效

覆盖前端研发全流程环节，可通用、可复用

￥499.00

难度中级时长 28小时学习人数 263 综合评分 10.00

立即购买加购物车

第1章如何突破前端技术瓶颈？如何快速学会脚手架开发？试看 7 节 | 72分钟

讲解为什么要学习脚手架，脚手架在前端领域有哪些应用以及学会脚手架对提升前端技术和个人竞争力有什么价值。

收起列表
- 视频： 1-1 你真的懂脚手架么？ (05:25) 试看
- 视频： 1-2 如何快速学会脚手架开发 (12:22) 试看
- 视频： 1-3 什么是Shell和Bash？ (08:48)
- 视频： 1-4 深入理解CLI和GUI (07:13)
- 视频： 1-5 从使用角度理解什么是脚手架？ (14:40)
- 视频： 1-6 脚手架原理讲解（上） (14:59)
- 视频： 1-7 脚手架原理讲解（下） (08:13)
第2章【初阶】如何开发脚手架？如何通过框架快速搭建脚手架？ 13 节 | 118分钟

本章将系统讲解脚手架的开发、调试和发布流程，并通过commander、yargs和oclif三种框架带大家快速完成脚手架搭建

收起列表
- 视频： 2-1 脚手架开发的预备知识 (07:36)
- 视频： 2-2 脚手架开发流程和难点解析 (08:43)
- 视频： 2-3 快速入门第一个脚手架 (06:14)
- 视频： 2-4 脚手架本地调试方法 (11:11)
- 视频： 2-5 脚手架本地调试标准流程总结 (06:54)
- 视频： 2-6 脚手架命令注册和参数解析 (09:45)
- 视频： 2-7 脚手架项目发布 (03:51)
- 视频： 2-8 脚手架框架yargs快速入门 (21:15)
- 视频： 2-9 yargs高级用法讲解 (13:05)
- 视频： 2-10 快速实现一个commander脚手架 (04:12)
- 视频： 2-11 commander脚手架全局配置 (05:39)
- 视频： 2-12 commander脚手架命令注册的两种方法 (09:44)
- 视频： 2-13 commander注册命令的两种高级用法 (09:16)
第3章【进阶】脚手架开发进阶之命令行UI显示 18 节 | 151分钟

讲解脚手架开发过程中进阶UI显示技巧，包括：色彩chalk、进度条ora、ui组件 stmux、列表组件listr等

收起列表
- 视频： 3-1 本章概览&重难点梳理 (04:57)
- 视频： 3-2 脚手架渲染标准——ANSI escape code讲解 (05:58)
- 视频： 3-3 chalk实现文本样式定制 (11:13)
- 视频： 3-4 chalk脚手架化chalk-cli讲解 (04:33)
- 视频： 3-5 chalk源码分析——初始化逻辑详解 (15:27)
- 视频： 3-6 chalk源码分析——渲染逻辑讲解 (05:19)
- 视频： 3-7 chalk源码分析——换行字符串渲染逻辑分析 (10:26) 试看
- 视频： 3-8 chalk源码分析——特殊字符串渲染逻辑分析 (07:44)
- 视频： 3-9 chalk源码分析——链接调用原理分析 (09:22)
- 视频： 3-10 chalk源码分析——精化知识点汇总和复习 (05:48)
- 视频： 3-11 ora基本用法讲解 (09:14)
- 视频： 3-12 ora高级用法oraPromise讲解 (04:08)
- 视频： 3-13 ora源码分析——利用bl+readline实现输入流缓冲 (10:31)
- 视频： 3-14 ora源码分析——核心方法render详解 (16:20)
- 视频： 3-15 ora源码分析——stop和succed源码分析 (04:37)
- 视频： 3-16 ora源码分析——手动实现ora核心逻辑 (11:11)
- 视频： 3-17 ora源码分析——精化知识点汇总和复习 (03:06)
- 视频： 3-18 源码阅读心得分享 (10:17)
第4章【高阶】脚手架进阶技巧之命令行交互 11 节 | 113分钟

本章将为大家详细剖析脚手架交互实现原理和开发技巧，阅读脚手架交互的核心库：readline和inquirer的源码，并手写命令行的列表选择交互

收起列表
- 视频： 4-1 本章概览&重难点梳理 (05:44)
- 视频： 4-2 inquirer基本用法和常用属性入门 (10:49)
- 视频： 4-3 inquirer其他交互形式演示 (06:29)
- 视频： 4-4 inquirer源码分析的预备知识分析 (04:10)
- 视频： 4-5 readline的使用方法和实现原理 (09:53)
- 视频： 4-6 高阶：深入讲解readline键盘输入监听实现原理 (23:39)
- 视频： 4-7 高阶：手写readline核心实现 (08:42)
- 视频： 4-8 响应式库rxjs快速入门 (04:50)
- 视频： 4-9 放大招：手写命令行交互式列表组件（上） (15:57)
- 视频： 4-10 放大招：手写命令行交互式列表组件（下） (13:41)
- 视频： 4-11 inquirer源码执行流程分析 (08:14)
第5章【高阶】脚手架开发必会之多package项目管理 12 节 | 94分钟

脚手架开发过程中，经常会碰到多个package的协同开发问题，本章我们将应用npm的workspaces和lerna的多package管理能力解决这个问题，并学习lerna源码，掌握脚手架开发的最佳实践

收起列表
- 视频： 5-1 本章概览&重难点梳理 (02:59)
- 视频： 5-2 基于脚手架架构讲解lerna和workspaces的基本概念 (04:21)
- 视频： 5-3 npm workspaces基础特性实践 (15:06)
- 视频： 5-4 npm workspaces项目发布实践 (06:19)
- 视频： 5-5 lerna基本用法讲解 (12:27)
- 视频： 5-6 lerna依赖引用+自动化测试+项目发布（上） (11:36)
- 视频： 5-7 lerna依赖引用+自动化测试+项目发布（下） (08:17)
- 视频： 5-8 lerna源码分析——import-local逻辑分析 (09:36)
- 视频： 5-9 lerna源码分析——脚手架命令注册流程 (06:53)
- 视频： 5-10 lerna源码分析——脚手架核心执行流程 (06:24)
- 视频： 5-11 npm workspaces和lerna特性总结 (02:29)
- 视频： 5-12 Lerna最新版本使用指南 (07:04)
第6章【进阶】脚手架通用框架封装 14 节 | 112分钟

本章我们将在上一章的基础上，完成脚手架的通用框架封装，实现脚手架的通用能力沉淀，本章项目开发完成后，我们可以应用到自己的脚手架项目中

收起列表
- 视频： 6-1 本章概览&重难点梳理 (02:18)
- 视频： 6-2 脚手架入口文件开发 (09:30)
- 视频： 6-3 脚手架注册+命令注册 (05:35)
- 视频： 6-4 脚手架Command类+init命令封装 (12:14)
- 视频： 6-5 log日志功能封装 (10:34)
- 视频： 6-6 node最低版本检查功能开发 (07:00)
- 视频： 6-7 【重点】CommonJS和ESM混合开发最佳实践（上） (09:26)
- 视频： 6-8 【重点】CommonJS和ESM混合开发最佳实践（下） (11:34)
- 视频： 6-9 脚手架移植esm模块 (11:19)
- 视频： 6-10 脚手架功能增强和异常监听 (09:16)
- 视频： 6-11 脚手架自动化测试——jest测试环境集成 (06:45)
- 视频： 6-12 脚手架自动化测试——jest支持esm (05:06)
- 视频： 6-13 脚手架自动化测试——jest自动化测试用例开发 (07:26)
- 视频： 6-14 本章重点知识总结和复盘 (03:01)
第7章【脚手架1】项目创建脚手架——实现项目创建自动化 10 节 | 100分钟

日常工作中，我们常常会面临如何复用老项目代码的问题，本章我们将通过脚手架的方式实现项目创建的自动化，快速解决老项目代码复用问题，同时正式进入第一个项目开发

收起列表
- 视频： 7-1 本章概览&重难点梳理 (05:30)
- 视频： 7-2 vue+react项目模板开发 (13:02)
- 视频： 7-3 获取项目创建类型 (14:38)
- 视频： 7-4 获取项目名称和创建模板 (06:46)
- 视频： 7-5 npm API接入和封装 (10:20)
- 视频： 7-6 下载项目模板流程开发（上） (15:38)
- 视频： 7-7 下载项目模板逻辑开发（下） (06:51)
- 视频： 7-8 拷贝项目模板逻辑开发 (13:04)
- 视频： 7-9 非交互式项目创建逻辑开发 (09:44)
- 视频： 7-10 项目创建脚手架技术沉淀 (04:21)
第8章【脚手架1】项目创建脚手架——实现项目模板配置化 10 节 | 84分钟

在上一章我们实现了项目源码的复用，但是代码模板需要以硬编码的方式写死在脚手架代码中，本章我们将通过npm+mongodb的方式实现项目模板的配置化，从而实现动态更新代码模板的能力

收起列表
- 视频： 8-1 本章概览&重难点梳理 (04:14)
- 视频： 8-2 基于vue-element-admin项目模板制作 (07:28)
- 视频： 8-3 服务端egg项目初始化 (04:51)
- 视频： 8-4 egg编写后端API+脚手架请求后端API获取模板 (15:52)
- 视频： 8-5 RestfulAPI规范详解+egg实现RestfulAPI (15:38)
- 视频： 8-6 MongoDB环境准备+数据准备 (06:36)
- 视频： 8-7 使用egg-mongoose连接MongoDB数据库 (06:32)
- 视频： 8-8 应用mongoose框架实现MongoDB查询 (08:53)
- 视频： 8-9 团队模板选择能力开发 (07:01)
- 视频： 8-10 模板配置化开发过程技术沉淀总结 (06:48)
第9章【脚手架1】项目创建脚手架——实现项目渲染动态化 15 节 | 137分钟

上一章我们实现了代码模板的配置化，在实际工作中，某一个模板在不同场景下可能会产生不同的应用，所以对同一个模板的渲染会存在动态化需求，本章我们就将利用ejs实现项目模板渲染过程的动态化，有效解决这个问题

收起列表
- 视频： 9-1 本章概览&重难点梳理 (03:37)
- 视频： 9-2 ejs模板引擎的三种基本用法 (12:32)
- 视频： 9-3 ejs模板不同标签用法详解 (10:06)
- 视频： 9-4 ejs模板几种特殊用法 (08:49)
- 视频： 9-5 glob用法小结 (05:33)
- 视频： 9-6 项目动态模板改造+渲染流程开发（上） (07:18)
- 视频： 9-7 项目动态模板改造+渲染流程开发（下） (10:12)
- 视频： 9-8 动态模板实现逻辑优化 (05:57)
- 视频： 9-9 动态模板插件机制设计和实现（上） (11:51)
- 视频： 9-10 动态模板插件机制设计和实现（下） (14:04)
- 视频： 9-11 ejs源码分析——ejs.compile执行流程分析 (07:20)
- 视频： 9-12 ejs源码分析——深入讲解ejs编译原理 (18:18)
- 视频： 9-13 ejs源码分析——动态生成Function+with用法讲解 (06:46)
- 视频： 9-14 ejs源码分析——ejs compile函数执行流程分析 (08:05)
- 视频： 9-15 ejs源码分析——ejs.render和renderFile原理讲解 (05:48)
第10章【脚手架2】前端源码下载器——github+gitee API接入 11 节 | 88分钟

本章将完成github+gitee API接入，并完成下载器的实现流程设计

收起列表
- 视频： 10-1 本章概览&重难点梳理 (03:41)
- 视频： 10-2 github API接入流程+token生成方法 (06:28)
- 视频： 10-3 github搜索+仓库API命令行调试方法 (13:00)
- 视频： 10-4 github源码+issue搜索 API接入 (08:42)
- 视频： 10-5 gitee API接入流程 (05:52)
- 视频： 10-6 前端下载器开发流程设计 (03:16)
- 视频： 10-7 前端下载器脚手架命令注册 (06:52)
- 视频： 10-8 github+gitee API请求基类封装 (12:40)
- 视频： 10-9 Git平台选择+token缓存功能开发 (13:46)
- 视频： 10-10 Github Search API接入 (07:55)
- 视频： 10-11 Gitee Search API接入 (05:00)
第11章【脚手架2】前端源码下载器——下载功能实现 11 节 | 122分钟

本章将在github+gitee API接入的基础上，完成下载器的主体功能实现

收起列表
- 视频： 11-1 Github搜索交互开发 (10:04)
- 视频： 11-2 实现搜索列表和翻页功能 (15:22)
- 视频： 11-3 Github 源码搜索功能开发 (08:07)
- 视频： 11-4 Gitee 搜索功能接入和翻页功能实现 (11:52)
- 视频： 11-5 Github 选择仓库tags+翻页功能开发 (21:23)
- 视频： 11-6 Gitee 选择仓库tags+翻页功能开发 (06:29)
- 视频： 11-7 Gitee 下载指定分支源码功能开发 (10:53)
- 视频： 11-8 Github 下载指定分支源码功能开发 (04:41)
- 视频： 11-9 自动安装依赖功能开发 (14:40)
- 视频： 11-10 自动启动项目功能开发 (09:58)
- 视频： 11-11 项目bin文件自动安装 (08:20)
第12章【脚手架3】代码规范自动化检查+自动化测试 9 节 | 62分钟

本章将通过脚手架实现自动化的代码规范检查和自动化测试，通过eslint、jest和mocha的API进行代码规范和单元测试的自动化执行

收起列表
- 视频： 12-1 本章概览&重难点梳理 (03:18)
- 视频： 12-2 lint脚手架创建 (06:08)
- 视频： 12-3 eslint快速入门 (05:34)
- 视频： 12-4 eslint API调用方法 (04:47)
- 视频： 12-5 eslint API 接入vue项目 (15:26)
- 视频： 12-6 eslint 接入vue项目优化 (06:39)
- 视频： 12-7 jest API调用方法 (05:12)
- 视频： 12-8 mocha API调用方法 (04:36)
- 视频： 12-9 自动化测试流程优化 (09:25)
第13章【脚手架3】深入自动化测试框架mocha 7 节 | 53分钟

本章将为大家扩展如何利用自动化测试框架mocha进行单元测试，并讲解自动化测试的基本概念及mocha的高级特性

收起列表
- 视频： 13-1 Mocha进阶——单元测试基本概念介绍 (04:31)
- 视频： 13-2 Mocha进阶——Mocha基本运行流程讲解 (05:53)
- 视频： 13-3 Mocha进阶——Mocha源码调试方法和执行流程分析 (11:02)
- 视频： 13-4 Mocha进阶——mocha异步测试方法+node evenloop详细讲解 (12:20)
- 视频： 13-5 Mocha进阶——断言库should.js快速入门 (07:11)
- 视频： 13-6 Mocha进阶——async函数测试方法+钩子函数介绍 (06:30)
- 视频： 13-7 Mocha进阶——独家测试和包容性测试介绍 (05:26)
第14章【脚手架4】代码提交器——GitFlow流程+远程仓库创建 10 节 | 87分钟

本章我们将学习大厂的Git操作规范——GitFlow，并且在此基础上完成脚手架4的第一阶段开发，即远程仓库初始化，我们将应用Github和Gitee的API实现远程仓库的自动创建

收起列表
- 视频： 14-1 本章概览&重难点梳理 (05:36)
- 视频： 14-2 git flow 基础流程讲解1 (11:05)
- 视频： 14-3 git flow 多人协作流程讲解（详细讲解大厂git flow流程） (11:23)
- 视频： 14-4 阶段1【远程仓库初始化】开发流程设计 (04:54)
- 视频： 14-5 commit脚手架框架搭建 (07:29)
- 视频： 14-6 远程git平台选择逻辑开发 (11:38)
- 视频： 14-7 远程仓库实例化代码封装和复用 (06:59)
- 视频： 14-8 Gitee获取用户及组织API接入 (09:44)
- 视频： 14-9 Github用户和组织API接入+缓存刷新功能开发 (09:34)
- 视频： 14-10 Gitee&Github仓库类型选择+仓库用户名获取 (08:10)
第15章【脚手架4】代码提交器——远程仓库逻辑优化+Git自动初始化 9 节 | 64分钟

本章将在上一章的基础上，继续完成远程仓库创建逻辑优化，并实现Git仓库的自动初始化和自动关联远程仓库

收起列表
- 视频： 15-1 脚手架逆向逻辑和流程完善 (12:38)
- 视频： 15-2 Gitee创建仓库API接入 (12:49)
- 视频： 15-3 Github创建仓库API接入 (03:31)
- 视频： 15-4 Gitee获取仓库能力开发 (08:53)
- 视频： 15-5 Github获取仓库能力开发 (04:32)
- 视频： 15-6 自动创建gitignore文件 (03:31)
- 视频： 15-7 git remote地址生成 (05:36)
- 视频： 15-8 git init + git remote自动添加 (05:22)
- 视频： 15-9 git init逻辑优化+拉取远程master分之 (06:09)
第16章【脚手架4】代码提交器——实现代码自动化提交 10 节 | 71分钟

本章将完成代码自动化提交器剩余功能开发，实现本地代码根据git flow规范自动化提交，并处理提交过程中的各种复杂问题，如代码冲突、代码同步、分支切换等

收起列表
- 视频： 16-1 远程master分支推送逻辑实现 (11:14)
- 视频： 16-2 关键算法——自动获取远程分支号 (10:02)
- 视频： 16-3 关键算法——自动生成本地开发分支号 (10:50)
- 视频： 16-4 stash区检查+代码冲突检查 (04:56)
- 视频： 16-5 代码自动commit+开发分支自动切换 (03:41)
- 视频： 16-6 自动合并远程master和开发分支 (05:12)
- 视频： 16-7 自动推送开发分支+代码冲突处理 (07:31)
- 视频： 16-8 Git发布——自动创建远程分支 (07:21)
- 视频： 16-9 Git发布——自动合并master分支+删除开发分支 (05:41)
- 视频： 16-10 代码提交器测试+快速迭代功能演示 (03:39)
第17章【脚手架5】云发布脚手架——实现github actions自动化发布 8 节 | 55分钟

本章将通过脚手架实现 github actions 自动化发布能力，借助 git hook 触发自动化任务，实现前端项目云发布功能

收起列表
- 视频： 17-1 本章概览&重难点梳理 (04:00)
- 视频： 17-2 前端发布流程和原理讲解 (08:43)
- 视频： 17-3 Github Actions基本概念讲解 (04:20)
- 视频： 17-4 Github Actions完整执行流程+yml配置文件讲解 (06:59)
- 视频： 17-5 Github Actions多workflows演示 (06:57)
- 视频： 17-6 代码自动化部署脚本+SSH远程连接实现 (12:20)
- 视频： 17-7 远程服务器连接+创建文件测试 (04:38)
- 视频： 17-8 github actions实现前端项目自动部署 (06:15)
第18章【脚手架5】云发布脚手架——实现jenkins+docker自动化发布 8 节 | 61分钟

本章将借助 jenkins + docker 实现前端项目云发布功能，将带领大家在本地和服务器上安装 jenkins 和 docker 环境，并通过脚手架调用 API 的方式实现前端项目发布

收起列表
- 视频： 18-1 jenkins+docker自动化部署技术方案讲解 (03:45)
- 视频： 18-2 jenkins安装和基础配置 (11:00)
- 视频： 18-3 jenkins构建任务创建 (07:17)
- 视频： 18-4 github webhooks+jenkins构建任务联调 (08:23)
- 视频： 18-5 jenkins自动化发布脚本开发 (09:30)
- 视频： 18-6 docker基本概念和nginx镜像下载 (05:57)
- 视频： 18-7 docker+nginx镜像实现前端发布 (07:45)
- 视频： 18-8 jenkins+docker自动化发布实现 (06:25)
第19章面试指导——如何利用脚手架提升个人竞争力 6 节 | 38分钟

本章将从脚手架面试的角度，为大家讲解如何在简历中添加脚手架项目经验，如何在面试中回答脚手架的各种问题

收起列表
- 视频： 19-1 本章概览 (02:49)
- 视频： 19-2 针对脚手架学习的场见问题分析 (03:52)
- 视频： 19-3 脚手架开发的三个层次 (07:31)
- 视频： 19-4 模拟问题1：谈谈你对脚手架的理解 (04:23)
- 视频： 19-5 模拟问题2：谈谈你开发过的脚手架 (08:32)
- 视频： 19-6 模拟面试3：谈谈你开发脚手架过程中碰到的技术问题 (10:46)