前端工程化之脚手架工具

在前端快速发展的今天，如果不能时刻保持学习就会很快被淘汰。分享一下前端工程化中有关于脚手架的相关知识，文章有点长，希望对大家有所帮助。每天进步一点点。

一、脚手架的工作原理及作用

1、脚手架是前端工程化的发起者，它可以自动创建项目基础解构，提供项目规范和约定

2、脚手架工具的工作原理其实很简单，在启动脚手架之后，它会自动的询问一些预设的问题，然后将你回答的问题结合模板文件生成项目的结构

3、在搭建新项目的时候，项目中会有一些相同的组织结构，相同的开发范式，相同的模块依赖，相同的工具配置，相同的基础代码。使用脚手架工具可以快速搭建一个特定的项目骨架，把这些大量的重复的机械性的复杂的工作自动完成，后期基于这个骨架进行开发。

4、例如，IDE创建项目的过程就是一个脚手架的工作流程

二、常用的脚手架工具

脚手架的实现方式：根据开发者提供的信息自动创建对应的项目基础结构、文件，以及一些特定的配置

1、特定项目的脚手架工具：

React 项目：create-react-app

Vue.js 项目：vue-cli

Angular 项目：angular-cli

2、通用项目的脚手架工具：

Yeoman、Plop

三、通用脚手架工具剖析

1、Yeoman介绍

可以说是最老牌，最强大，最通用的一款工具，它有很多值得我们借鉴和学习的地方。Yeoman搭配Generator可以创建任何类型的项目，所以我们可以通过创建自己的Generator来定制我们自己的前端脚手架

2、Yeoman使用

<1> 步骤概述:

a、明确你的需求

b、找到合适的Generator

c、全局范围安装找到的Generator

d、通过 yo 运行对应的Generator

e、通过命令行交互填写选项

f、生成你所需要的项目结构

<2> 具体步骤：【以 generator-node 为例】

a、确保node环境已安装

b、全局安装Yeoman npm -g i yo

c、搭配特定Generator搭建项目，全局安装 npm i -g generator-node

d、定位到项目根目录，运行 yo node 搭建项目 ，如果提示没有安装generator-node，可以再安装一下，npm i generator-node

e、根据提示输入 模块名，描述，项目地址，作者姓名，邮箱，主页，关键词（多个关键词用英文逗号隔开），是否发送代码覆盖率到平台（与后续持续集成和代码质量保证有关，可先选择No），支持 node 的版本（不输入默认全部版本），github用户名，license选择 （MIT 相对宽松的软件授权条款）

f、输入完毕后会自动在当前目录下生成一些基础文件，并自动运行 npm i 安装相应的依赖。

g、这样我们就得到了一些基础的项目结构和项目代码

四、使用Yeoman开发脚手架

了解了yeoman的使用，我们就可以基于 Yeoman 自定义 Generator 来搭建我们自己的脚手架。接下来我们使用大白话描述，快速上手实现一个我们自己的脚手架工具。

1、实现 generator-self

① cmd 进入终端