const inquirer = require('inquirer'); inquirer.prompt([ { type: 'input', name: 'author', message: '请输入作者名称' } ]).then((answers) => { console.log(answers.author); })
通过这里例子可以看出,问题就放在 prompt() 中,问题的类型为 input 就是输入类型,name 就是作为答案对象中的 key,message 就是问题了,用户输入的答案就在 answers 中,使用起来就是这么简单。更多的参数设置可以参考官方文档。
通过命令行交互,获得用户的输入,从而可以把答案渲染到模板中。
渲染模板
这里用 handlebars 的语法对 HTML5/H5Template 仓库的模板中的 package.json 文件做一些修改
{ "name": "{{name}}", "version": "1.0.0", "description": "{{description}}", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "{{author}}", "license": "ISC" }
并在下载模板完成之后将用户输入的答案渲染到 package.json 中
program.version('1.0.0', '-v, --version') .command('init <name>') .action((name) => { inquirer.prompt([ { name: 'description', message: '请输入项目描述' }, { name: 'author', message: '请输入作者名称' } ]).then((answers) => { download('xxxxx#master',name,{clone: true},(err) => { const meta = { name, description: answers.description, author: answers.author } const fileName = `${name}/package.json`; const content = fs.readFileSync(fileName).toString(); const result = handlebars.compile(content)(meta); fs.writeFileSync(fileName, result); }) }) });
这里使用了 node.js 的文件模块 fs,将 handlebars 渲染完后的模板重新写入到文件中。
视觉美化
在用户输入答案之后,开始下载模板,这时候使用 ora 来提示用户正在下载中。
const ora = require('ora'); // 开始下载 const spinner = ora('正在下载模板...'); spinner.start(); // 下载失败调用 spinner.fail(); // 下载成功调用 spinner.succeed();
然后通过 chalk 来为打印信息加上样式,比如成功信息为绿色,失败信息为红色,这样子会让用户更加容易分辨,同时也让终端的显示更加的好看。
const chalk = require('chalk'); console.log(chalk.green('项目创建成功')); console.log(chalk.red('项目创建失败'));
除了给打印信息加上颜色之外,还可以使用 log-symbols 在信息前面加上 √ 或 × 等的图标
const chalk = require('chalk'); const symbols = require('log-symbols'); console.log(symbols.success, chalk.green('项目创建成功')); console.log(symbols.error, chalk.red('项目创建失败'));
完整示例
#!/usr/bin/env node const fs = require('fs'); const program = require('commander'); const download = require('download-git-repo'); const handlebars = require('handlebars'); const inquirer = require('inquirer'); const ora = require('ora'); const chalk = require('chalk'); const symbols = require('log-symbols'); program.version('1.0.0', '-v, --version') .command('init <name>') .action((name) => { if(!fs.existsSync(name)){ inquirer.prompt([ { name: 'description', message: '请输入项目描述' }, { name: 'author', message: '请输入作者名称' } ]).then((answers) => { const spinner = ora('正在下载模板...'); spinner.start(); download('http://xxxxxx:9999:HTML5/H5Template#master', name, {clone: true}, (err) => { if(err){ spinner.fail(); console.log(symbols.error, chalk.red(err)); }else{ spinner.succeed(); const fileName = `${name}/package.json`; const meta = { name, description: answers.description, author: answers.author } if(fs.existsSync(fileName)){ const content = fs.readFileSync(fileName).toString(); const result = handlebars.compile(content)(meta); fs.writeFileSync(fileName, result); } console.log(symbols.success, chalk.green('项目初始化完成')); } }) }) }else{ // 错误提示项目已存在,避免覆盖原有项目 console.log(symbols.error, chalk.red('项目已存在')); } }) program.parse(process.argv);
效果如下: