关于前端:111 – 乐趣区

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

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 是一个终端字符串丑化工具。
装置：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')}!`);

丑化成果：

交互式命令行界面。提供了询问操作者问题，获取并解析用户输出，多层级的提醒，提供谬误回调，检测用户答复是否非法等能力。
装置：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 是名称。

高效的嵌入式 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 写简略的案例，相熟其应用。

commander

chalk

inquirer

ejs

作业