前端工程化-脚手架工具

以下皆为拉勾教育课件内笔记

什么是脚手架

为什么要用脚手架？

试想一下，我们第一次开发网站，所有的东西都需要自己完成，例如：轮播图，导航菜单，页面布局等等。

所以第一次开发网站用的时间比较长（假定 1 个月），但是，当我们第二次开发网站时，第一次写好的代码，很多代码都可以复用（轮播图，导航菜单，页面布局等等）。所以第二次开发相同类型的网站，可能只需要半个月。

你会发现，代码如果能复用的话，会极大地提高我们的开发效率。

而脚手架就是帮我们生成能复用的代码（项目基础结构）的工具，有了它，可能成倍地提高开发效率.。

脚手架是一款辅助开发的工具，它的作用是创建项目基础结构、提供项目规范和约定。

举例：

原来，你想吃饺子，需要自己和面，自己擀皮儿；但有一天，你发现，你家附近的超市里，有人在卖饺子皮儿（饺子的半成品）；从那以后，你包饺子的时间就缩短了一半。

脚手架，就是帮我们生产饺子皮儿（这种半成品）的工具。

Yeoman简介

Yeoman 是一款脚手架工具，其官方网站是 https://yeoman.io/

yo 是 Yeoman 的命令行工具，可以执行一系列的命令。

生成器是 Yeoman 中具体的脚手架。用来应对不同的应用场景（例如：生成网站和生成APP，我们使用不同的生成器）。

yo 是用来管理生成器的命令，生成器是帮我们生成复用代码的具体工具。

举例：yo 是医院院长，生成器是具体医生。医院院长管理医生，不同的医生应对不同的场景（儿科，妇科，眼科......）

如果网站被墙，在官网不能查看生成器
解决方案：https://github.com/justjavac/ReplaceGoogleCDN

Yeoman 最佳实践

仅需要几条安装命令，我们就能获得一个项目的半成品。（ 这里以 generator-webapp 这一款生成器为例 ）

# 全局安装 yo
npm install --global yo

# 安装对应的生成器（ generator ）
npm install --global generator-webapp

# 创建项目
mkdir project-name
cd project-name

# 通过 yo 运行 generator （ 时间有点长 ）
yo webapp

# 运行看效果
npm run start