浅谈前端常用脚手架cli工具及案例

前端常用脚手架工具

前端有很多特定的脚手架工具大多都是为了特定的项目类型服务的,比如react项目中的reate-react-app,vue项目中的vue-cli,angular

项目中的angular-cli根据一些信息创建对应的项目基础结构,只适用于对应的项目,还有一些对应的项目脚手架工具比如Yeoman。

根据模板生成对应的结构,比较灵活,容易拓展,还有一种脚手架工具plop,例如创建一个组建/模块所需要的文件.

一.Yeoman简介

Yeoman是一款最老牌最通用的脚手架工具,基于node.js开发的工具模块,是一款创建现代化应用的脚手架工具,不同于vue-cli这样

的工具,Yeoman更像是一个脚手架的运行平台,通过不同的Generator搭建属于自己的脚手架。

Yeoman的基本使用

首先,检查下node环境,另外个人感觉yarn的用户体验更加好一点,后续我们使用yarn代替npm去安装确保电脑上有node和yarn.

具体安装步骤如下:

yarnglobaladdyo(yo就是工具模块的名字)

yarnglobaladdgenerator-node//必须要搭配对应的Generator去使用

mkdirmy-module(找到合适的文件夹)

cdmy-module

yonode(运行特定的generator,把前面generator-去掉)

如上图所示文件夹中生成了基础的项目结构以及接触的项目代码.

SubGenerator

有时候我们并不需要创建完整的项目结构,可能我们只是在已有的项目结构上创建项目文件,比如在原有基础上新增eslint功能,我们

可以用生成器帮我们生成,这样会提高我们的效率,我们可以用

Yeoman提供的一些特性

比如添加一个cli应用,可以执行yonode:cli命令(命名方式为yogenrator:subgenrator)如下图所示,提供了一些基础的代码结构,

有了这个我们就可以把它当成个全局的命令行模块使用了,下面执行yarnlink到全局范围,然后执行yarn安装依赖,把所需要的依赖

安装进来,执行my-module--help就可以看到subgenerator特性.

综上所述,Yemon的使用步骤

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

创建一个自定义的Generator模块

Generator本质上就是一个npm模块,Generator有一个固定的结构,里面有一个generators的目录,下面有个app的文件夹生成对应文件的代码,

如果需要多个subGenerator,例如添加一个


转载请注明:http://www.aierlanlan.com/tzrz/4461.html