前端常用脚手架工具
前端有很多特定的脚手架工具大多都是为了特定的项目类型服务的,比如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,例如添加一个