Yeoman 初探

349 阅读4分钟

现如今随着前端的日渐发展,前端已经从之前的刀耕火种的年代,到了前端工程化的改变,而今天要探究的就是前端工程化中的一个重要部分-----脚手架工具。

为什么我们要使用脚手架工具?脚手架工具可以简单的认为是用来自动的帮我们创建项目基础结构、提供项目规范和约定的工具。通常我们在开发相似项目时,有一些共通的特性,比如:

1.相同的组织结构
2.相同的开发范式
3.相同的模块依赖
4.相同的工具配置
5.相同的基础代码

这样就会有大量的重复工作,而脚手架工具就是帮我们解决在创建项目过程中的一些重复问题的工具。

常用的脚手架工具:

1.creat-react-app
2.vue-cli
3.angular-cli
4.Yeoman

前面3种都是针对特定项目或框架所使用的特定的脚手架工具,我们今天重点探究一下Yeoman,一款通用型的脚手架工具。

Yeoman官方定义为The web's scaffolding tool for modern webapps,是一款用于创造现代化web应用的脚手架工具。Yeoman创建项目是基于generator的,不同的generator可以帮我们生成不同的项目。

Yeoman的基本使用(基于node 10.0版本以后的版本),以node项目为例:

yarn global add yo // 在全局范围安装yo
yarn global add generator-node // 安装对应的generator
yo node // 通过yo运行generator

在生成器过程中,会有相应的一些问题,在做一些特定输入后,就会生成如下的目录结构:

有时候我们并不需要创建完整的项目结构,我们只是需要在已有项目中创建特定的文件,在文件中会有一些特定的代码,我们自己编写容易出错,那么我们可以使用Yeoman中特定的Sub Generator来帮助我们生成对应的文件。

在上边的node项目例子中,我们继续加入一个cli的文件,那么我们继续在当前目录中使用命令行:

yo node:cli

执行完成之后就会生成特定的文件:

可以看到Sub Generator已经帮我们生成了一个cli应用的基础代码结构,有了这样的一个结构,我们就可以将这个模块作为一个全局的命令行模块进行使用了,本地的应用模块我们可以通过以下命令应用到全局范围:

yarn link // 将本地模块应用到全局范围
yarn // 安装模块依赖
my-module --help // 可以通过模块名运行模块啦!!!

注意:并不是每一个Generator都提供子集的生成器,在使用前需要通过相应Generator的官方文档明确是否提供相应的Sub Generator

Yeoman是一款通用型的脚手架工具,所以我们几乎可以使用其创建任何类型的脚手架项目,咱们可以总结下使用Yeoman的常规使用步骤:

1.明确你的需求;
2.找到合适的Generator;
3.全局范围安装找到的Generator;
4.通过Yo运行对应的Generator;
5.通过命令行交互填写选项;
6.生成你所需要的项目结构;

不同的Generator可以生成不同的项目,也就是说,我们可以通过自定义Generator来生成自己的项目结构,接下来,我们就研究下如何自定义一个Generator。

创建Generator,实质上就是创建一个NPM模块。

特定的结构:Generator的基本结构

如果需要多个Sub Generator,可以在app的同级目录下添加多个生成器目录,如下:

此时我们就生成了一个叫做component的子集生成器。

除了特定的结构,Yeoman的自定义生成器的模块名称必须是generator-<name>的格式。

这样我们就创建了一个简单的Generator。很多时候我们需要自动创建的文件很多,这样我们可以根据模板来创造。首先,我们需要再app目录下创建一个templates目录,在此目录下,就是我们创建的模板文件。

对于模板当中的一些动态数据,例如项目标题,项目名称,我们一般采用命令行交互的形式获取。

以上就一个简单的自定义generator,如有不足,请留言交流,欢迎大佬指正。