摘要：新建文件夾這是一個(gè)規(guī)范，可執(zhí)行工具的老家。然后輸入接下來會以問答的形式向你了解你的用戶名密碼以及公開的郵箱，之后輸入注意發(fā)布的源別是淘寶源，否則哦然后看到進(jìn)度條走，之后組件發(fā)布成功，可以到上搜索自己的包了。

寫這個(gè)工具的靈感以及場景源于youtube的一次閑聊

github 地址

blog首發(fā)

原本我們寫博客展示shell，例如:安裝運(yùn)轉(zhuǎn)docker，一鍵部署腳本，等一些終端操作，我們需要進(jìn)行大量的截圖展示給用戶，為什么不能更加直觀方便的生成一個(gè)網(wǎng)頁呢？

安裝

  sudo npm install share_shell -g

幫助

  tw --help   #1.0暫時(shí)用這個(gè)命令，沒想到好的縮寫

查看版本

tw --version || tw -v

使用

 # tw share "要展示的命令" -p "路徑"
 # 例如想 docker ps -a 秀一波你的docker容器
 tw share "docker ps -a" 或 tw s "docker ps -a"  # 默認(rèn)生成 share_you_shell.html 到當(dāng)前目錄  
 
 # 還可以指定路徑
 
 tw share "ls -all" -p /usr/local/html/share_shell.html  #自動創(chuàng)建文件，存在默認(rèn)覆蓋

涉及的技術(shù)棧，以及技術(shù)選型

shelljs 進(jìn)行CMD處理

首先我需要拿到windows 或 linux 的系統(tǒng)回調(diào)，使用 linux 中的 sed -n "p;n;p" 獲取輸入任何命令的返回值在終端、那么首先考慮shelljs API 單發(fā)現(xiàn) 對于 sed 處理的很少，并不能滿足我們的需求，但是看到了一個(gè)萬能函數(shù) shell.exec ，我們用他的回調(diào)來接受我們的文本

fs 或 fs-extra

fs-extra 對于 fs 的關(guān)系呢 就像是 lodash 和 underscore 前者封裝了后者，并提供了更好的支持，并做到了向下兼容API 很不容易，我們主要用它生成一個(gè)簡單的html文件來分享我們的shell

commander

我們選用 commander 來制作 類似 git docker 風(fēng)格的 cli 命令行工具 ， 因?yàn)闆]有其他更好的選擇

其他

我個(gè)人用了lodash string 進(jìn)行了偷懶操作，缺點(diǎn)是增加了兩個(gè)依賴，有點(diǎn)是快~

初始化

npm init 初始化生成標(biāo)準(zhǔn)的 package.json 文件，包含你的git信息，發(fā)布npm能找到你的描述，聯(lián)系方式，版本號等。

新建bin文件夾

這是一個(gè)規(guī)范，可執(zhí)行工具的老家。新建一個(gè)tw.js ，因?yàn)槭谴蛴C(jī)風(fēng)格的，所以瞎起了個(gè)名字 取typeWriter首字母

編輯 tw.js

var program = require("commander");

var appInfo = require("../package.json");

program.version(appInfo.version) // 拿到 package.json 你定義的版本
program
    .command("share ") // 定義你的command

    .alias("s") // 縮寫

    .description("Enter the "shell" you want to convert and include it in " "  ") // 描述

    .option("-p, --path ", "Enter you html path , default ./share_you_shell.html") // option 字命令，可以無限多個(gè)

    .action(function (cmd, options) {
    // 拿到cli輸入的option子命令，沒有可以默認(rèn)
        var path = typeof options.path == "string" ? options.path : "./share_you_shell.html"
        // 執(zhí)行你的操作 ↓
        // 執(zhí)行cli的command
        exec_shell.exec(cmd, (res) => {
            // 回調(diào)的res根據(jù)格式轉(zhuǎn)為數(shù)組
            var res_arr = S(res).lines()
            // 針對數(shù)組你的邏輯處理一波數(shù)組
            let str = format.toTypedFormat([cmd].concat(res_arr))
            // 異步制作你的文件，傳入路徑
            file.mkfile(str, path)
        })
    }).on("--help", function () {

         // --help  commander 有默認(rèn)處理，一般這部分無事可做，你還想干啥？
    });

program.parse(process.argv);

輸入 tw -- help 大概是這樣的

完善代碼

完善一下你各單位的邏輯，當(dāng)然你也可以選擇寫的更加優(yōu)雅。

預(yù)先注意的問題

我這個(gè)項(xiàng)目我會預(yù)先想到：保留shell的轉(zhuǎn)譯符 使用pre 原型輸入 ，處理一下scroll 保持底部，最后隨便找一個(gè)類似typewriterjs 開源庫，按照他的風(fēng)格生成一下就可以

寫完了？

node /bin/tw.js share "tree -L 2" -p xxx 測試一下，（你們可能沒有安裝tree，換任何可執(zhí)行的其他命令，長ping 除外）

全局測一下

我們最終是要發(fā)布到npm上的，可以讓用戶-g安裝，自己應(yīng)該先測試一下，

首先：確保你在 package.json 文件中添加了 bin 節(jié)點(diǎn)。并指明了主程序，像我這樣。

    "bin": {
        "tw": "./bin/tw.js"
      },

運(yùn)行

sudo npm install . -g

執(zhí)行

tw share "tree -L 2" -p xxx/xxx/xx.html

如果生成了`xx.html`，恭喜你，可以發(fā)布了

項(xiàng)目已經(jīng)準(zhǔn)備好了，接下來可以著手發(fā)布了。首先npm上注冊賬號，別忘了去郵箱驗(yàn)證。然后輸入：

npm adduser

接下來會以問答的形式向你了解你的用戶名、密碼以及公開的郵箱，之后輸入

npm publish

注意??！
發(fā)布npm 的源別是 cnpm 淘寶源，否則 401 哦

然后看到進(jìn)度條走，之后組件發(fā)布成功，可以到npm上搜索自己的包了。

npm install share_shell (取決于你package.json當(dāng)時(shí)填寫的項(xiàng)目名)
甚至你 cnpm install share_shell 也能下載，淘寶同步真他媽快。

npm i share_shell -g 全世界 所有 用戶都可以下載了

思考

node既然為我們提供了如此簡潔的方式，那么我們可以做一些更有意義的事情，比如 為我們的開源項(xiàng)目 做一個(gè) 部署、 發(fā)布、 打包、 測試 、CLI工具集，可以做一些日常工作的批處理 ，比如以前工作中的場景：多臺服務(wù)器 負(fù)載均衡 查看后端日志是個(gè)麻煩事，需要開很多終端，我們可不可以配置好rsa 或 ssh 合并多個(gè) 管道 重定向?yàn)橐粋€(gè)終端進(jìn)行查看呢？

做一個(gè)推薦

1.0不夠好，也就能個(gè)人blog站點(diǎn)用用，分享給別人瞧瞧，我打算下一步2.0發(fā)表到我即將完成的 目前技術(shù)棧比較主流的 bbs new-bee 上, 順便推廣一波，當(dāng)然順便點(diǎn)個(gè) star支持一下也很感激，當(dāng)然這也是我首次提及此項(xiàng)目，此項(xiàng)目涉及到docker webpack vue spring-boot shell腳本 各種中間件 各種前沿ui庫腳手架 未來甚至可能嘗試基于docker的微服務(wù)小型實(shí)踐，總之想做的事情真的很多。

就是愛學(xué)習(xí)，我還要刺激大家一起學(xué)習(xí)