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

Lruihao 收录于 Node.js

2023-11-28 2023-12-08 约 1100 字预计阅读 3 分钟 - 次阅读 - 条评论

/posts/fixit-cli/images/featured-image.png

注意

本文最后更新于 2023-12-08，文中内容可能已过时。

本文将介绍如何用 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 link 将 fixit 命令链接到全局。

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)

然后再去实现这些命令所执行的动作：createAction、checkAction、helpAction 和完善一下 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

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

1 前言

2 思路

3 开发

3.1 初始化项目

3.2 安装依赖

3.3 定义一个 CLI

3.4 命令行交互

4 源码

相关内容