用 Node.js 开发一个轻量脚手架

本文将介绍如何用 Node.js 开发一个轻量脚手架,以 fixit-cli 为例。

1 前言

在维护 FixIt 这个项目时,很多新人可能第一次接触 Hugo,第一次使用 FixIt 主题,可能觉得无从下手。在之前的工作中,为了避免这个问题,我新增了两个模板项目:

然并卵哈哈哈🤣,大家似乎都有种惰性,不愿意认真地读一遍 README,即使只需简单几步就能通过 GitHub template 创建一个拥有完整主题配置、自动化部署完善的博客。

懒惰是人类进步的源泉,想到 Vue CLI、Create React App 这些脚手架,我决定开发一个轻量级的脚手架 fixit-cli,让大家能够快速地上手 FixIt 主题。

2 思路

fixit-cli 的思路很简单,就是通过命令行交互,让用户输入一些信息,然后根据这些信息生成一个完整的博客项目。

  • fixit create my-blog 创建一个名为 my-blog 的项目
  • fixit check 检查 FixIt 主题的最新版本

3 开发

3.1 初始化项目

1
2
3
mkdir fixit-cli
cd fixit-cli
npm init -y

然后在 package.json 中写点项目信息。

3.2 安装依赖

1
npm install commander inquirer chalk simple-git ora --save

主要依赖:

依赖用途
commander完整的 Node.js 命令行解决方案
inquirer常见交互式命令行用户界面的集合
chalk命令行输出样式
simple-git用于在任何 Node.js 应用程序中运行 Git 命令的轻量级接口
ora命令行 loading 效果

如果需要使用简单的 git clone 下载模板,可以使用 download-git-repo 替代 simple-git

3.3 定义一个 CLI

package.json 中添加 bin 字段,指定 CLI 的入口文件。

1
2
3
4
5
{
  "bin": {
    "fixit": "bin/cli.js"
  }
}

然后在 bin 目录下创建 cli.js 文件,写入以下内容:

1
2
3
#!/usr/bin/env node

console.log('Hello, FixIt!')

代码顶部的 #!/usr/bin/env node 是告诉终端,这个文件要使用 node 去执行,等同于 node bin/cli.js

如果我们想要在终端执行 fixit 命令,可以使用 npm linkfixit 命令链接到全局。

1
2
3
npm link
# 卸载本地包
npm unlink fixit

或者也可以使用 npm install -g 全局安装。

1
npm install -g fixit-cli /Users/cell/workspace/fixit-cli/

3.4 命令行交互

先把要实现的命令和选项列出来:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
#!/usr/bin/env node
import { Command } from 'commander'

// ...

// define commands
program
  .command('create <project-name>')
  .description('create a new FixIt project from a template')
  .action(createAction)
program
  .command('check')
  .description('check the latest version of FixIt theme')
  .action(checkAction)
program
  .command('help <command>')
  .description('display help for a specific command')
  .action(helpAction)

// define cli
program
  .usage('<command> [options]')
  .description(description)
  .version(`${pkg.name} v${pkg.version}`, '-v, --version')
  .showHelpAfterError()
  .parse(process.argv)

然后再去实现这些命令所执行的动作:createActioncheckActionhelpAction 和完善一下 logo 和 description 等细节。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
Usage: fixit <command> [options]

=============================================

        ▄████  ▄█     ▄  ▄█    ▄▄▄▄▀ 
        █▀   ▀ ██ ▀▄   █ ██ ▀▀▀ █    
        █▀▀    ██   █ ▀  ██     █    
        █      ▐█  ▄ █   ▐█    █     
         █      ▐ █   ▀▄  ▐   ▀      
          ▀        ▀                
              fixit-cli v1.0.2
         A cli tool for FixIt theme.

=============================================

FixIt is a clean, elegant but advanced blog theme for Hugo
built with love by Lruihao and his friends.

Complete documentation is available at https://fixit.lruihao.cn/.

Options:
  -v, --version          output the version number
  -h, --help             display help for command

Commands:
  create <project-name>  create a new FixIt project from a template
  check                  check the latest version of FixIt theme
  help <command>         display help for a specific command

最后发布到 npm 上就完活了。

1
2
npm login
npm publish

发布后,就可以通过 npm install -g fixit-cli 全局安装了。

安装后,例如,创建一个名为 my-blog 的站点:

1
fixit create my-blog

4 源码

命令动作的具体实现详见 FixIt CLI 源码。

FixIt CLI https://github.com/hugo-fixit/fixit-cli

相关内容

Buy me a coffee~
Lruihao 支付宝支付宝
Lruihao 微信微信
0%