手脚架开发过程中使用了一些工具,比如交互提示,获取用户输入,高亮,生成模板等等。这里对他们进行简单的介绍。
commander
commander 是一个命令行解决方案。通过它可以告诉用户脚手架的命令与功能,以及处理用户输入。
安装:npm install commander
- 简单的使用:
const { program } = require('commander');
program.parse(); // 解析
执行命令:node main.js --help
- 添加名称,描述,版本号,用法提示。
const { program } = require('commander');
// 名称,描述,版本号,用法提示。
program
.name('cli')
.description('这是一个神奇的脚手架')
.version('0.0.1')
.usage('<command> [options]');
program.parse();
执行命令:node main.js --help
,内容更加丰富了:
- 添加 createPage 命令
const { program } = require('commander');
// 名称,描述,版本号,用法提示。
program
.name('cli')
.description('这是一个神奇的脚手架')
.version('0.0.1')
.usage('<command> [options]');
// createPage 命令
program.command('createPage')
.description('生成一个页面') // 命令描述
.argument('<name>', '文件名字') // <name> 表 name 为必填
.action((name) => { // 输入该命令的动作,逻辑实现。
console.log(`新建了一个文件:${name}`);
});
program.parse();
执行命令:node main.js createPage index.vue
chalk
chalk 是一个终端字符串美化工具。
安装:npm install chalk@4.1.2
chalk 最新版是 ES6 Module 的写法,不支持 require 使用,如果遇到错误
Error [ERR_REQUIRE_ESM]: require() of ES Module /node_modules/chalk/source/index.js from /Desktop/test/main.js not supported.
安装旧版本可以避免该问题。
使用:chalk.blue 表字体蓝色,chalk.red 表字体红色,chalk.underline 表下划线,chalk.bgRed 表背景红色
const chalk = require('chalk');
console.log(`${chalk.blue('hello')}, ${chalk.red('this')} ${chalk.underline('is')} ${chalk.bgRed('chalk')}!`);
美化效果:
inquirer
交互式命令行界面。提供了询问操作者问题,获取并解析用户输入,多层级的提示,提供错误回调,检测用户回答是否合法等能力。
安装:npm install inquirer@8.2.5
inquirer 最新版是 ES6 Module 的写法,不支持 require 使用,遇到错误
Error [ERR_REQUIRE_ESM]: require() of ES Module /node_modules/chalk/source/index.js from /Desktop/test/main.js not supported.
安装旧版本可以避免该问题。
使用:
const inquirer = require('inquirer')
const arr = [
{
type: 'input',
name: 'projectName',
message: '项目名称',
default: 'vue-demo',
},
{
type: 'list',
name: 'projectType',
message: '项目类型',
default: 'vue2',
choices: [
{ name: 'vue2', value: 'vue2' },
{ name: 'vue3', value: 'vue3' },
{ name: 'react', value: 'react' }
]
},
{
type: 'checkbox',
name: 'plugins',
message: '插件选择',
choices: [
{ name: 'babel', value: 'babel' },
{ name: 'eslint', value: 'eslint' },
{ name: 'vue-router', value: 'vue-router' }
]
},
{
type: 'confirm',
name: 'confirm',
message: 'confirm',
}
];
inquirer.prompt(arr).then(answers => {
console.log('==============');
console.log(answers);
}).catch(error => {
console.log('--------------')
console.log(error)
})
type 表示类型,input 表示输入框,list 表示单选项,checkbox 表示多选项,confirm 表示确认项。
name 表示键名,default 表默认值,message 是名称。
ejs
高效的嵌入式 JavaScript 模板引擎。模板可以通过数据进行动态渲染。
安装:npm install ejs
根据用户状态渲染不同的视图:
const ejs = require('ejs')
const str = `
<div>
<% if (user) { %>
<span><%= user.name %></span>
<% } else { %>
<span>登录</span>
<% } %>
</div>
`;
// 编译模板
let template = ejs.compile(str, {});
// 渲染模板,根据用户状态渲染不同的视图。
const data = { user: null }; // { user: { name: 'zhangsan' } }
console.log(template(data))
data 为 { user: null }
,渲染结果:
data 为 { user: { name: 'zhangsan' } }
,渲染结果: