express-ssr-cli

如何写一个脚手架

脚手架的用途

• 减少重复性的工作
• 动态生成项目结构和配置文件等。

参考 vue-cli 脚手架

将模板放到 github 上, 下载模板

主要的功能

1. 命令行交互
2. 可配置模板

开始

处理命令行

node.js 内置了对命令行操作的支持，在 package.json 中的 bin 字段可以定义命令名和关联的执行文件。所以现在 package.json 中加上 bin 的内容：

然后在 index.js 中来定义 init 命令：

#!/usr/bin/env node
const program = require('commander');

// 将 -v 和 --version 添加到命令中，可以通过这些选项打印出版本号
program.version('1.0.0', '-v, --version')
  .command('init <name>')   //定义 init 命令，name 则是必传的参数，为项目名
  .action((name) => {
     console.log(name);
  });
program.parse(process.argv);

下载模板

download-git-repo 支持从 Github、Gitlab 和 Bitbucket 下载仓库

// API
download(repository, destination, options, callback)

这里从 github 下载一个仓库, github 可以简写成 owner/name, # 之后是分支名, 当然也能够加上目录, 下载仓库中的某个目录

download('alyzhao/express-ssr#master', 'test/tmp', { clone: true }, err => {
  // do something
});

命令行交互

可以选择一些配置项, 个性化配置, 主要用 inquirer 库

相关方法:

inquirer.prompt(questions: Question[]): Promise<Answers[]>

interface Question {
  // 问题的类型, 不同的类型有不同的交互
  type: 'input' | 'number' | 'confirm' | 'list' | 'rawlist' | 'expand' | 'checkbox' | 'password' | 'editor';
  // 返回的 answer 中的 key
  name: string;
  // 控制台打印的问题
  message: string | Function;
  // 默认配置
  default: string | number | boolean | array | function;
  choices: array | function;
  ...
}

渲染模板

我们需要对 package.json 中的相关信息进行修改需要用到 handlebars 库

1. 先对模板仓库中的 package.json 进行修改

{
  "name": "express-ssr",
  "version": "1.0.0",
  "description": "{{description}}",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/alyzhao/express-ssr.git"
  },
  "author": "{{author}}",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/alyzhao/express-ssr/issues"
  },
  "homepage": "https://github.com/alyzhao/express-ssr#readme"
}

2. 把输入的信息写入模板当中

const content = fs.readFileSync(filePath).toString()
const meta = {
  description: 'description',
  author: 'author',
}
const result = handlebars.compile(content)(meta)
fs.writeFileSync(filePath, result)

优化

使用 ora 来提示用户正在下载中

const spinner = ora('download...')
spinner.start()

// 下载失败调用
spinner.fail();

// 下载成功调用
spinner.succeed();

然后通过 chalk 来为打印信息加上样式

console.log(chalk.red('error!'))
console.log(chalk.blue('success!'))

也可以使用 didYouMean 库, 来对输入的无效命令进行提示

didYouMean(str, list, [key]);

第三方库

一个简单的脚手架, 主要用到以下依赖:

• commander 自动的解析命令和参数，用于处理用户输入的命令
• download-git-repo 下载 git 仓库
• inquirer 命令行用户交互界面, 输入, 选择等操作
• handlebars 模板引擎
• ora 显示加载动画, 界面优化
• chalk 在命令行中打印不同颜色的输出, 界面优化
• didYouMean 对用户的输入进行建议