命令行工具的開發應該是每個前端工程師必備的技能,但是有很多同學剛開始學習時不知道如何入手,今天就來簡單介紹一下如何用commander來開發命令行工具。
初始化
-
首先cd進入某個文件夾,運行npm init,根據提示信息來生成package.json文件;
-
之後在同級目錄下創建bin/test1.js文件;
-
接着在package.json中增加bin字段:
"bin": { "test1": "./bin/test1.js" },
我們在寫命令行工具的時候,需要指定一個可執行文件。在package.json中,bin字段用來映射命令名和可執行文件。在通過npm install -g全局安裝的時候,npm會symlink可執行文件到prefix/bin文件夾。如果通過npm install本地安裝的時候, npm會symlink可執行文件到./node_modules/.bin/文件夾。(完整的字段說明在這裏:https://docs.npmjs.com/files/package.json)
-
之後開始編寫test1.js文件
#! /usr/bin/env node //選擇用什麼來運行腳本
var program = require('commander'),
chalk = require('chalk'),
path = require('path'),
fs = require('fs'),
inquirer = require('inquirer');
program
.version(require('../package').version)
.description('a test commander program')
.option('-n --name <name>', 'your name')
.option('-a --age <age>', 'your age')
.option('-e --enjoy [enjoy]');
program
.command('add [dir]')
.option('-s --select', 'select answer')
.on('--help', () => {
console.log('開始創建文件')
}) //on像是某些option的說明
.action((dir, cmd) => {
if(cmd.select){
console.log('start select mode');
// inquirer 交互式命令時使用
inquirer.prompt({
type: 'input',
name: 'email',
message: '請輸入郵箱'
}).then((res) => {
// chalk爲輸出的文字加狀態,如顏色、字體等
console.log(chalk.red(res.email));
// process.cwd()獲取當前路徑
var filePath = path.join(process.cwd(), dir || 'common');
fs.exists(filePath, (exists) => {
console.log('文件是否存在', chalk.yellow(exists));
if(!exists)
fs.mkdir(filePath, (err) => {
if(err) console.log('err', err);
});
else
fs.rmdirSync(filePath);
});
});
}
});
program.parse(process.argv);
調試
當我們在開發命令行工具時不可能每次修改的時候都傳到服務器上去重新下載更新檢測,故這裏我們使用npm link方法;
在npm包文件夾下執行npm link 命令,會創建一個符號鏈接,鏈接全局文件夾{prefix}/lib/node_modules/和你執行npm link的包文件夾。
注意:package-name是package.json中的name, 而不是文件夾名。
詳細的解釋在這兒: https://docs.npmjs.com/cli/link
在本文中,我們在根目錄下使用npm link,之後根目錄下創建/src文件夾來進行測試;
cd src/
test1 -h
Usage: test1 [options] [command]
a test commander program
Options:
-V, --version output the version number
-n --name <name> your name
-a --age <age> your age
-e --enjoy [enjoy]
-h, --help output usage information
Commands:
add [options] [dir]
test1 add '/image' -s //增加交互式消息,並且成功輸入之後在src文件夾下創建image文件夾
發佈
單純的發佈包到npm非常簡單,只需要一條命令:
npm publish
但是一個完善規範的發佈流程不僅如此,還需要考慮版本號的規範(Semver),commit message的規範,tag等一系列因素。如果手動來搞的話,是挺麻煩的。
這裏推薦使用relix, 一步搞定!
sudo npm i relix -g
進入cli-demo文件夾,然後:
relix --patch
會自動幫你生成新版本號,生成提交信息,打tag,推送提交和tag到github,發佈npm包!relix的詳細用法請看relix文檔。