从0到1打造一款脚手架:commander 等工具的使用

61 阅读2分钟

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

commander

commander 是一个命令行解决方案。通过它可以告诉用户脚手架的命令与功能,以及处理用户输入。 安装:npm install commander

  • 简单的使用:
const { program } = require('commander');

program.parse(); // 解析

执行命令:node main.js --help

image.png

  • 添加名称,描述,版本号,用法提示。
const { program } = require('commander');

// 名称,描述,版本号,用法提示。
program
  .name('cli')
  .description('这是一个神奇的脚手架')
  .version('0.0.1')
  .usage('<command> [options]');

program.parse();

执行命令:node main.js --help,内容更加丰富了:

image.png

  • 添加 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

image.png

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')}!`);

美化效果:

image.png

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 是名称。

image.png

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 },渲染结果:

image.png

data 为 { user: { name: 'zhangsan' } },渲染结果:

image.png