脚手架可以简单理解为用来自动帮我们创建项目基础文件的工具。看似很普通的需求,背后却饱含哲学,因为除了创建文件,它更重要的是提供给开发者一些约定或规范。
通常我们在开发相同类型的项目时都会使用一些相同的约定,其中包括:
- 相同的文件组织结构
- 相同的代码开发范式
- 相同的模块依赖
- 相同的工具模块配置
- 相同的基础代码
这样一来就会出现在搭建新项目时有大量重复工作要做。脚手架工具就是用来解决此类问题的。我们可以通过脚手架工具快速搭建特定类型项目的基础骨架结构,然后基于这个基础结构进行后续的开发工作。
脚手架是前端工程化的起步,本课程中重点探讨前端工程化在项目创建环节中的具体表现。
适用人群
有一些简单前端开发经验,希望深入了解脚手架工具设计思想的同学
知识储备:
- 熟练使用 HTML、CSS
- 掌握 JavaScript 语言基础
- 了解 Vue.js 之类的框架更佳
学习目标
- 了解脚手架工具设计思想
- 了解常用的脚手架工具
- 掌握通用脚手架 Yeoman 的开发和使用
- 掌握 Plop 工具的使用
- 理解脚手架工作过程的内部原理
课程内容
- 脚手架工具概要
- 常用的脚手架工具
- Yeoman 简介
- Yeoman 基础使用
- Sub Generator
- Yeoman 使用步骤总结
- 自定义 Generator
- 创建 Generator 模块
- 根据模板创建文件
- 接收用户输入
- Vue Generator 案例
- 发布 Generator
- Plop 简介
- Plop 的基本使用
- 脚手架的工作原理