前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >用 Node.js 开发一个轻量脚手架

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

作者头像
Cell
发布2023-11-30 09:47:49
2320
发布2023-11-30 09:47:49
举报
文章被收录于专栏:Cell的前端专栏Cell的前端专栏

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

前言

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

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

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

思路

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

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

开发

初始化项目

代码语言:javascript
复制
mkdir fixit-cli
cd fixit-cli
npm init -y

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

安装依赖

代码语言:javascript
复制
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

定义一个 CLI

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

代码语言:javascript
复制
{
  "bin": {
    "fixit": "bin/cli.js"
  }
}

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

代码语言:javascript
复制
#!/usr/bin/env node

console.log('Hello, FixIt!')

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

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

代码语言:javascript
复制
npm link
# 卸载本地包
npm unlink fixit

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

代码语言:javascript
复制
npm install -g fixit-cli /Users/cell/workspace/fixit-cli/

命令行交互

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

代码语言:javascript
复制
#!/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 等细节。

代码语言:javascript
复制
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 上就完活了。

代码语言:javascript
复制
npm login
npm publish

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

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

代码语言:javascript
复制
fixit create my-blog

源码

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

FixIt CLIhttps://github.com/hugo-fixit/fixit-cli

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2023-11-282,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • 思路
  • 开发
    • 初始化项目
      • 安装依赖
        • 定义一个 CLI
          • 命令行交互
          • 源码
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档