111

手脚架开发过程中使用了一些工具，比如交互提示，获取用户输入，高亮，生成模板等等。这里对他们进行简单的介绍，方便后续的开发。

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' } }，渲染结果：

作业

使用 commander、chalk、inquirer、ejs 写简单的案例，熟悉其使用。