这应该是最主要(但不难)的一步了,毕竟我们写到现在还没有通过命令初始化过一个项目呢:sob:。所以这步的重点就是执行 download 方法,并传入相应参数,具体看代码:
#!/usr/bin/env node const program = require('commander') const chalk = require('chalk') const ora = require('ora') const download = require('download-git-repo') const tplObj = require(`${__dirname}/../template`) program .usage('<template-name> [project-name]') program.parse(process.argv) // 当没有输入参数的时候给个提示 if (program.args.length < 1) return program.help() // 好比 vue init webpack project-name 的命令一样,第一个参数是 webpack,第二个参数是 project-name let templateName = program.args[0] let projectName = program.args[1] // 小小校验一下参数 if (!tplObj[templateName]) { console.log(chalk.red('\n Template does not exit! \n ')) return } if (!projectName) { console.log(chalk.red('\n Project should not be empty! \n ')) return } url = tplObj[templateName] console.log(chalk.white('\n Start generating... \n')) // 出现加载图标 const spinner = ora("Downloading..."); spinner.start(); // 执行下载方法并传入参数 download ( url, projectName, err => { if (err) { spinner.fail(); console.log(chalk.red(`Generation failed. ${err}`)) return } // 结束加载图标 spinner.succeed(); console.log(chalk.green('\n Generation completed!')) console.log('\n To get started') console.log(`\n cd ${projectName} \n`) } )
ok,我们执行一下 xr init simple test ,记得先执行一下 xr add :
现在我们就可以在左侧的目录中看到 test 项目了,如下图:
至此,一个小小的脚手架就做完了。:rose::rose::rose:此处应该有鲜花和掌声:clap::clap::clap:
发布到 npm
既然以上命令都执行成功了,那接下来我们就把它发布到 npm 上吧(写都写了,不能浪费:grimacing:)。
删除 test 文件夹,它就本地测试用的,用完就抛弃它(当然做人不能这样)
在根目录下新建 README.md 文件,随便写点使用说明,假装正经一下
在根目录下新建 .npmignore 文件,并写入 /node_modules ,意思就是发布的时候忽略 node_modules 文件夹,
去 npm 官网注册个账号(很简单的),同时搜索一下 xr-cli 这个名字,看看有没有人用,有的话就换一个罗
现在让我们回到项目根目录,执行 npm login 登入 npm 账号,再执行 npm publish 发布,就像下面这样:
没错,就是这样两个简单的命令,我们就发布成功啦,真是可喜可贺:beer::beer::beer:。大概过一分钟左右(反正挺快的),我们再去 npm 官网搜下 xr-cli,就可以看到自己的脚手架啦,哈哈哈哈,贼开心:+1::+1::+1:。
这里补充说明一点:根据规范,只有在发包的24小时内才允许撤销发布的包,所以为了不污染 npm 网站,如果只是测试的话就执行 npm unpublish --force 删除吧,毕竟我们都是有素质的人。
小试牛刀