如何使用Node.js編寫命令工具——以vue-cli為例

vue-cli全局安裝之後，提供了vue命令和vue init、vue list、vue build三個子命令，通過命令可以搭建基於vue.js的腳手架項目。本文簡單介紹一下這些命令是如何實現的。

如下圖，由之前文章介紹，npm安裝過程中，可以利用package.json中bin欄位的配置，將bin目錄下的命令文件軟連到全局命令。也就是說在/usr/local/bin下生成了四個軟連命令：vue、vue-build、vue-list、vue-init。

#!/usr/bin/env node

require("commander")
.version(require("../package").version)
.usage(" [options]")
.command("init", "generate a new project from a template")
.command("list", "list available official templates")
.command("build", "prototype a new project")
.parse(process.argv)

該命令採用commander.js來實現。commander的主要方法：

（1）parse：用於解析process.argv，將process.argv.slice(2)賦值給program.args；

（2）command：創建子命令，子命令的使用方法是command [options]，實際調用的命令是command-subcommand，如使用命令行執行vue list，其實是在執行vue-list全局命令；

（3）options：主要設置命令的參數，同時提供參數對應的說明文檔，默認提供的option是--help。

vue-init的主要功能是拉取指定git目錄下的項目模板文件（官方或自製）到指定目錄下，用法如下

$ vue init

這裡仍需要解析process.argv，所以在vue-init中又引入了commander.js，生成了一個program

program
.usage(" [project-name]")
.option("--offline", "use cached template")

/**
* Help.
*/

function help {
program.parse(process.argv)
if (program.args.length < 1) return program.help } help

接下來就是要實現拉取模板文件，經處理後，放置到產出目錄下，具體如何實現的，接下來會有專門的文章介紹vue-cli命令的實現原理，敬請期待！

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！