写一个属于你的前端脚手架工具

作者：飞翔荷兰人

你可能用到过很多前端脚手架工具，有没有试想过到底如何写一个属于你的脚手架呢？

脚手架依赖工具

commander.js 命令行工具

download-git-repo git仓库代码下载

chalk 命令行输出样式美化

Inquirer.js 命令行交互

ora 命令行加载中效果

项目搭建

初始化项目

创建项目目录后执行npm init按照提示完成初始化项目。

安装依赖

安装上面我们提到过的这几个脚手架依赖工具，执行

npm install chalk commander download-git-repo inquirer ora --save

完成安装。

项目结构

项目初始化完成后，创建bin文件和commands文件。bin文件为可执行命令入口目录，commands则负责编写一些命令交互。

bin 目录下 react-cli 文件

commands 目录下 init 文件

1.可以解析执行init 时候传入的参数， 我们可以拿到这个参数做为项目创建的目录名，如果没有传入该参数则为其设置一个默认目录名称。

命令行交互问答

数组为交互命令配置，数组中每一个对象都对应一个执行命令时候的一个问题

为该提问的类型，为该问题的名字，可以在后面通过name拿到该问题的用户输入答案

为问题的提示

则为用户没输入时的默认为其提供一个答案

方法可以校验用户输入的内容，返回true时校验通过，若不正确可以返回对应的字符串提示文案

为用户输入问题答案后将对应的答案展示到问题位置，需要有返回值，返回到字符串为展示内容具体使用文档

。

问答结束的回调

prompt方法中then里的参数是一个对象，可以由此拿到问题由name定义的用户输入内容。

根据用户输入的内容，可以对应为其生成下载模版，这里使用工具来下载git仓库代码

download方法第一个参数为要下载代码仓库位置，如果为GitHub代码仓库只需要写用户名和项目名称即可，如即为下载该仓库master的代码，如果需要切换对应分支则在仓库地址后面加入对应分支名，如。

download方法第二个参数为生成下载文件的文件名，我将他保存在命令执行目录下，文件名使用用户输入的名字，如参数为，即可在当前执行命令目录下生成对应的文件名。

模块可以为我们生成下载时候的旋转图标，ora方法传入的第一个参数为等待时候的提示文案并生成实例，在实例对象上调用start()方法开始出现旋转动画和提示，stop()方法停止。

模版下载好以后需要为文件生成用户自定义输入的内容，node的模块的readFile方法可以帮助我们获取生成文件的内容，writeFile则可以写入内容

最后完成后可以在命令行面板上使用console方法给出一些提示内容，模块可以帮助我们美化输出内容。

文章中脚手架示例代码可以见 build-react-cli

工具测试及发布

在写的过程中免不了在我们本地进行测试，因为本身项目为node的工具，我们可以在项目目录下执行 运行。

当然在发布以后肯定不能使用该命令，此时在发布前，添加中的对象，key为脚本执行的名字，value为执行目录，如 ，即可在输入build-react的时候等同于执行 命令，在我们全局安装脚手架的时候，bin对象里面的内容即可变成全局可执行命令。

发布npm包，npm包发布非常简单，注册npm账号后本地登录即可，在项目目录下执行即可发布，注意包名不能与现有的npm里的相同、每次发布新版本的包时需要修改里的版本号，发布的包只有在24小时内可以删除

最后推荐两个我写的脚手架工具

build-react-cli是帮助你快速创建生成react项目的脚手架工具，配置了多种可选择的不同类型项目模版。

LiveNode超简单的前端跨域、前后端分离解决方案