前端js自动填写 点击_前端脚手架工具

脚手架工具的本质作用：自动的帮我们创建项目基础文件的工具（创建项目的基础结构、提供项目的规范和约定）

• 相同的组织结构
• 相同的开发范式
• 相同的模块依赖
• 相同的工具配置
• 相同的基础代码

其实我们常用的IDE创建项目的过程就是一个脚手架工具的工作流程，下面我们以Android Studio为例演示下创建项目的流程

点击Start创建项目开始，其实我们就进入到Android Studio内置脚手架工具工作流程

选择项目的类型

填写项目相关的属性和配置

最后得到Android项目最基础的骨架

而在前端技术创建过程当中，由于前端技术选型比较多样，另外又没有一个统一的标准，所以前端的脚手架不会集成在某一个IDE当中，都是以一个单独的工具而存在，相对而言复杂很多，但本质上都是一样的，创建项目的过程中解决那些复杂的工作

那么我们前端开发过程当中常用的脚手架工具有哪些呢？

• React项目中我们会使用到create-react-app
• Vue项目中我们会使用到Vue-cli
• Angular项目中我们会使用到Angular-cli

以上脚手架工具我相信很多前端开发的同学应该都接触和使用过，也不用我在这边介绍了。那么它们的使用方式也都大同小异，无外乎都是根据你提供的信息创建对应项目的基础结构（项目所需要的特定文件和一些基础配置，但是它们只适用于它们所服务的那个框架的项目

本章我们具体介绍的是以Yeoman为代表的通用性脚手架工具和Plop在项目开发过程当中创建一些特定类型的文件。例如：创建一个组件/模块所需要的文件

通用性脚手架工具：可以根据一套模版生成一个对应的项目结构，这种类型的脚手架一般都比较灵活，很容易扩展

那么下面我们具体介绍下Yeoman和Plop

官方介绍：THE WEB'S SCAFFOLDING TOOL FOR MODERN WEBAPPS（用于创造现代化脚手架工具）

Yeoman不同于我们常用的普通脚手架工具（create-react-app、vue-cli、angular-cli）,Yeoman更像一个脚手架的运行平台，我们可以通过Yeoman搭配不同的generator去创建任何类型的项目，也就是说我们通过创建自己的generator从而去定制适合自己的前端开发脚手架

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

yo node

生成的文件