原理解析：如何实现自己的脚手架工具？-技术圈

脚手架工具

什么是脚手架工具？工程化中，最重要的就是脚手架工具了，什么是脚手架工具呢？生活中其实很常见：

比如写一个网站，最开始都是从零开始的，后面再写一个相同类型的网站时，就可以将之前的代码直接复制过来了。如果将可以复制的这些内容抽离出来，每次开发新东西，都能自动生成就好了。

再举个例子，之前我们家包饺子，都是自己擀皮，后来发现楼下超市有买饺子皮的，饺子皮就是个半成品，脚手架工具就是做这些半成品的。

我们的项目中，会有各种文件夹及文件，脚手架就可以一键生成：

脚手架的作用：创建项目基础结构、提供项目规范和约定。

前端的脚手架工具，分为两类，通用型和专用型。

通用型脚手架工具 Yeoman

Yeoman 的基本概念：The web's scaffolding tool for modern webapps，即用于现代化 web 应用程序的脚手架工具。

Yeoman 是一款脚手架工具，可以帮助开发人员创建项目的基础结构代码。yo 是 Yeoman 的命令行管理工具，可以在命令行运行 yeoman 的命令。

generator 生成器则是 Yeoman 中具体的脚手架。针对不同的项目，例如网站、APP、小程序等，有不同的脚手架生成器。

Yeoman 使用说明及使用步骤：

全局安装 yo：npm install -g yo
安装 generator，不同的 generator 可以生成不同的项目：

 npm install -g generator-webapp  ||  npm install -g generator-node

通过 yo 运行 generator：yo webapp || yo node
启动应用：npm run start

使用步骤：

1：明确你的需求；

2：找到合适的 Generator;

3：全局范围安装找到的 Generator;

4：通过 Yo 运行对应的 Generator;

5：通过命令行交互填写选项；

6：生成你所需要的项目结构；

自定义 Generator

基本使用

一个 Generator 就对应了一个类型的项目，我们可以通过自定义的 Generator 实现一个自己的脚手架工具，高度定制适合自己的脚手架工具。

创建 Generator 实际上就是创建一个 NPM 模块， Generator 基本结构：

如果想生成多个，只需要创建对应的目录及文件即可。

还有一点需要注意， Generator 的名字必须是 generator-<name>的形式。

创建一个文件夹，然后初始化项目 npm init -y

安装 Generator 基类，基类提供了很多工具函数，让我们方便地完成定制化

npm install yeoman-generator

然后按照目录要求，创建 generator-sample\generators\app\index.js 文件。

注意文件夹及文件名不要写错：generator-xxx\generators\xxxx\index.js

index.js：

最后使用 npm link 命令，将 generator-sample 挂载为全局命令。如果出现意外，可以使用 npm config get prefix 命令查找 npm 全局目录，然后查看 generator-sample 是否存在，确认全局命令创建成功后，就可以使用 yo sample 命令在新的目录中生成文件内容。