![da9b354fe180c89ef84b7963e04d865a.png](https://i-blog.csdnimg.cn/blog_migrate/2d8410df61d1ddde53c64c772240963d.jpeg)
脚手架工具的本质作用:自动的帮我们创建项目基础文件的工具(创建项目的基础结构、提供项目的规范和约定)
- 相同的组织结构
- 相同的开发范式
- 相同的模块依赖
- 相同的工具配置
- 相同的基础代码
其实我们常用的IDE创建项目的过程就是一个脚手架工具的工作流程,下面我们以Android Studio为例演示下创建项目的流程
![f61a3dee72eff569bfeb2dfc9b7cf4da.png](https://i-blog.csdnimg.cn/blog_migrate/339c77de49438e1c7bef8c36065a3765.png)
![1a9cb63d1a70e379bbd3c9e950312d43.png](https://i-blog.csdnimg.cn/blog_migrate/a07b361273e278bab5706d31ed4abc5c.jpeg)
![77c444fd403dc8f20dcdefcb3003277c.png](https://i-blog.csdnimg.cn/blog_migrate/bea1580f2482162388b0416bd164c52a.png)
![9493300b5cf2851a5bd99ff642080b82.png](https://i-blog.csdnimg.cn/blog_migrate/c51facbb95b3bc7f5b5752fa718a343d.png)
而在前端技术创建过程当中,由于前端技术选型比较多样,另外又没有一个统一的标准,所以前端的脚手架不会集成在某一个IDE当中,都是以一个单独的工具而存在,相对而言复杂很多,但本质上都是一样的,创建项目的过程中解决那些复杂的工作
那么我们前端开发过程当中常用的脚手架工具有哪些呢?
- React项目中我们会使用到create-react-app
- Vue项目中我们会使用到Vue-cli
- Angular项目中我们会使用到Angular-cli
以上脚手架工具我相信很多前端开发的同学应该都接触和使用过,也不用我在这边介绍了。那么它们的使用方式也都大同小异,无外乎都是根据你提供的信息创建对应项目的基础结构(项目所需要的特定文件和一些基础配置,但是它们只适用于它们所服务的那个框架的项目
本章我们具体介绍的是以Yeoman为代表的通用性脚手架工具和Plop在项目开发过程当中创建一些特定类型的文件。例如:创建一个组件/模块所需要的文件
通用性脚手架工具:可以根据一套模版生成一个对应的项目结构,这种类型的脚手架一般都比较灵活,很容易扩展
那么下面我们具体介绍下Yeoman和Plop
![bb7deaf6a2eeca64ad1e0f5cbb807eb2.png](https://i-blog.csdnimg.cn/blog_migrate/0baac56f9bd4e9485db6681b6c183259.png)
官方介绍:THE WEB'S SCAFFOLDING TOOL FOR MODERN WEBAPPS(用于创造现代化脚手架工具)
Yeoman不同于我们常用的普通脚手架工具(create-react-app、vue-cli、angular-cli),Yeoman更像一个脚手架的运行平台,我们可以通过Yeoman搭配不同的generator去创建任何类型的项目,也就是说我们通过创建自己的generator从而去定制适合自己的前端开发脚手架
![216e10e58edabb15db5d80dbb3e5a77f.png](https://i-blog.csdnimg.cn/blog_migrate/bc539fcd808469548d8095e5074e010a.jpeg)
![ad1cd0ec377d77643cba15780fe5d00b.png](https://i-blog.csdnimg.cn/blog_migrate/8823f71a10dfde8f5f4639563e4139d3.jpeg)
![031860fff1848eb7941c2dd9b5c7ecdd.png](https://i-blog.csdnimg.cn/blog_migrate/bfdb9013ffa2b76717907fec1f1cb8f9.jpeg)
Yeoman基本使用
Yeoman是基于Node.js开发的工具模块,那么使用它的时候需要通过NPM全局安装它
npm install yo --global # or yarn global add yo
因为Yeoman需要搭配特定的Generator才能去使用它,所有我们单单只安装yo是远远不够的,我们需要找到用于生成我们想要项目类型的Generator,关于支持哪些Generator我们可以去Yeoman官网去找,那么这里我们使用generator-webapp去生成我们的项目
npm install generator-node --global # or yarn global add generator-node
现在我们既然有了yo和generator-webapp两个模块了,那么就可以让Yeoman帮我们去创建适合我们自己的webapp了
首先需要建一个空的文件夹,我们自己的项目文件,进入到这个文件当中使用
yo node
![2991743279276a31ade59793a4090309.png](https://i-blog.csdnimg.cn/blog_migrate/72a19edf256444212bf7308277b6e31b.jpeg)
![8a0e91432cf7270c4666d59e3caa5e10.png](https://i-blog.csdnimg.cn/blog_migrate/a17b0eb9835522b3760e769f6ee0142f.png)