【手把手帶你擼一個腳手架】第一步, 建立第一個命令

圈圈Dei圈發表於2018-11-13

系列文章:

WTF 不知道腳手架是啥? 那抓緊惡補一下前端基礎把兄die, 相信不久的以後你就會回來的.

ps: 本文檔案操作基於 bash, mac 同學直接用 terminal 或 iterm 即可, win 使用者推薦使用 git bash

腳手架, 源自於建築行業, 通俗的講就是一個專案搭建的工具. 比較熟知的有 vue-cli create-react-app 等等, 這類工具通常以 xxx-cli 命名, 不廢話 先甩一個 npm 戰績

2018-11-13-20-20-41

小哥哥, 看看這資料, 你到底要還是不要嘛...

2018-11-13-20-24-25

==================== 分割線 ====================

實現 node 和 shell 的互動

光說不練假把式, 第一步我們先跑一個自己的 node 命令

首先建立一個專案目錄, 根據慣例, 我們的腳手架也叫 cli, 就叫 learn-cli 吧, 好好學習, 天天向上

mkdir learn-cli
複製程式碼

然後, 直接 npm init -y 建立一個 node 專案

cd learn-cli
npm init -y
複製程式碼

用你喜歡的編輯器, 開啟 learn-cli 目錄, 推薦 vscode, 在 package.json 中新增程式碼

"bin": {
    "learn": "./bin/learn.js"
},
複製程式碼

建立 bin 目錄和 learn.js 檔案, 在 learn.js 中新增以下程式碼. 檔案頭部的 #!/usr/bin/env node 這一句是告訴 shell 要以 node 來解析接下來的 learn 檔案. 剩下的就是我們熟悉的 js 啦 ^ - ^

#!/usr/bin/env node
console.log('好好學習, 天天向上')
複製程式碼

通過終端進入到專案的根目錄執行 npm link 如果出現一下提示說明 link 成功

2018-11-13-20-50-31

這個命令的作用其實就是新增了兩個軟鏈(win 使用者可以理解為快捷方式)到系統的環境變數下. 此時, 在命令列中輸入 learn 試一下

2018-11-13-20-51-50

哈哈哈哈, 熟悉的名言就這麼出來啦, 出來啦....

2018-11-13-20-53-52

接收命令列傳來的引數

我們可以通過 process.argv 獲取到啟動 node 程式時傳入的命令列引數

使用原生的方式獲取命令好傳入的引數

調整 learn.js 檔案為如下:

#!/usr/bin/env node
console.log(process.argv[2] + '好好學習, 天天向上')
複製程式碼

再次回到終端執行 learn 圈圈, 即可得到以下輸出, 關於為什麼要用 process.argv[2] 請參閱 文件

2018-11-13-21-03-42

使用 commander 接收命令列傳入的引數

使用原生的方式可以獲取到傳入的引數, 但是這種方式更適合簡單的演示專案, 在這裡我們選用社群優選的 commander 來處理引數問題, 別問我為什麼這麼用, 就是為了兩個字 ------- 裝逼

2018-11-13-21-10-23

先上一個官方的栗子

#!/usr/bin/env node
const program = require('commander')
program
.version('0.0.1')
.option('-C, --chdir <path>', 'change the working directory')
.option('-c, --config <path>', 'set config path. defaults to ./deploy.conf')
.option('-T, --no-tests', 'ignore test hook')

program
.command('setup')
.description('run remote setup commands')
.action(function() {
  console.log('setup');
});

program
.command('exec <cmd>')
.description('run the given remote command')
.action(function(cmd) {
  console.log('exec "%s"', cmd);
});

program
.command('teardown <dir> [otherDirs...]')
.description('run teardown commands')
.action(function(dir, otherDirs) {
  console.log('dir "%s"', dir);
  if (otherDirs) {
    otherDirs.forEach(function (oDir) {
      console.log('dir "%s"', oDir);
    });
  }
});

program
.command('*')
.description('deploy the given env')
.action(function(env) {
  console.log('deploying "%s"', env);
});

program.parse(process.argv);
複製程式碼

首先, 安裝 commander

npm i commander -S
複製程式碼

其次將官方示例貼上到我們的 learn.js 中, 隨便執行一個命令試試learn 圈圈 learn -V, 就是這麼莫名其妙的好用了.

2018-11-13-21-19-34

到目前為止, 我們已經完成了萬里長城第一步, 有興趣的小夥伴可以自己嘗試一下下面的步驟喲 ^ _ ^.

相關文章