如何搭建一个npm脚手架

首先脚手架功能比较简单,只是拉取远程的模板项目到本地,再执行npm install

先贴上项目结构,bin目录存放的是我们node执行文件的入口,command目录存放的是现实的命令,目前只实现了“create”命令,template目录存放我们的模板项目,就是我们在执行命令后拉取的项目

如何搭建一个npm脚手架

第一步就是要说明入口文件smy.js了,入口文件用来注册命令,比较简单

主要就是了解commander类库,这个类库主要是提供用户命令行输入和参数解析

如何搭建一个npm脚手架

接下来就是create命令文件了,第一张图是使用到的模块,第二张图是导出的函数,也就是命令的执行方法

如何搭建一个npm脚手架

首先co是一个迭代器模块,搭配co-prompt可以用同步的方式获取用户在命令行的输入

fs-extra是fs的扩展模块,方便我们清理文件夹,以及复制template下的模板项目如何搭建一个npm脚手架

这里是一个拉取git项目的实现,把模板项目放到远程git仓库,clone到本地

如何搭建一个npm脚手架

这里是一个复制脚手架本地template中模板项目的实现,不推荐这种方式,这种方式更新模板就需要更新脚手架

如何搭建一个npm脚手架

到这里我们就实现了一个脚手架的功能,但是目前这样还不能像vue那样,直接在命令行执行

接下来还有package.json中的“bin”配置,bin中的配置就是说,在命令行执行npm smy命令时,这个命令的执行文件是“bin/smy.js”

如何搭建一个npm脚手架

最后,我们在本地测试一下,我们可以在项目根目录执行npm link,把“smy”添加到全局npm命令,然后再命令行执行smy出现如下图,就说明我们的脚手架就搭建成功了

如何搭建一个npm脚手架