基於node和npm的命令列工具——tive-cli

天問發表於2022-01-05
NPM命令列

前端開發過程中經常會用到各種各樣的腳手架工具、npm全域性工具包等命令列工具，如：Vue腳手架@vue/cli、React腳手架create-react-app、node程式守衛工具pm2、本地靜態服務工具serve、程式碼格式化工具prettier等等。因此也自行開發了一套基於node和npm的命令列工具集，主要封裝了自動化shell指令碼工具和開箱即用的Vue全家桶模板工具。

tive-cli

一、全域性安裝

提示： tive-cli 依賴 Node.js (>=7.x)

npm install tive-cli -g

二、Vue全家桶模板工具

1.介紹

模板工具內建了Vue2.0和Vue3.0兩個版本所對應的 Vue全家桶 模板，可根據專案需要自行選擇使用。

  1. vue2.0+VantUI移動端模板
  2. vue3.0+vite2+VantUI移動端模板

2.使用

# 自定義目錄生成
tive create <project-name>

# 當前目錄生成
tive create .

執行次命令後，會出現命令列互動式選擇，可使用上（↑）下（↓）箭頭進行選擇，如下：

E:\dev>tive create vue3-demo
? 請選擇要建立的腳手架或Demo (Use arrow keys)
> vue2.0+VantUI移動端Demo
  vue3.0+vite2+VantUI移動端Demo

回車（enter）確認後，會輸出：

E:\dev>tive create vue3-demo
? 請選擇要建立的腳手架或Demo vue3.0+vite2+VantUI移動端Demo
{ tel: 'tive6/tive-vue3-vite-demo' }
√ tive-vue3-vite-demo 下載成功

Done. Now run:

   cd vue3-demo
   npm install
   npm start

接下來就可以按照提示的命令進行操作：

cd vue3-demo

npm install

npm start

演示Demo：

三、自動化shell指令碼工具

1.介紹

指令碼工具封裝了兩個常用的Git常用指令碼命令和自定義的shell指令碼命令，並統計了執行時長。

2.使用

2-1.Git常用指令碼命令

  1. push當前分支程式碼到遠端倉庫
tive git -b <branch> -m "commit description"  
 
# 例：push master分支程式碼到遠端倉庫

例： push master分支程式碼到遠端倉庫

tive git -b master -m "master commit"

相當於依次執行了以下6個命令：

git status
git add .
git commit -m "master commit"
git pull origin master
git push origin master
git status
  1. 當前分支合併到目標分支並push到遠端倉庫
tive git -b <current branch> -t <target branch> -m "commit description"

例： 將dev分支合併到test分支並push到遠端倉庫

tive git -b dev -t test -m "dev merge"

等價於依次執行了以下10個命令：

git status
git add .
git commit -m "dev merge"
git pull origin dev
git checkout test
git pull origin test
git merge --no-ff -m "dev merge into test" dev
git push origin test
git checkout dev
git status

2-2.自定義的shell指令碼命令

需要在專案根目錄下新建tive.config.js，和package.json同級

// tive.config.js

module.exports = {
    shell: [
        'node -v',
        'npm -v',
        'ls',
        'git status',
    ]
}

提示：

  1. shell命令可以根據專案需要靈活搭配，如：git命令、node命令、npm指令碼命令、shell指令碼命令等等。
  2. 前端專案可以在package.json檔案的scripts中配置對應的npm命令。配置例如：
{
  "scripts": {
    "start": "npm run serve",
    "serve": "vue-cli-service serve",
    "dev": "nodemon --watch vue.config.js --exec \"npm start\"",
    "build": "vue-cli-service build",
    "git": "tive git -c tive.config.js",
  },
}

現在就可以愉快的使用 npm run git 命令來執行指令碼了。

npm run git

輸出：

E:\dev\vue-demo>npm run git

> vue-demo@1.0.0 git
> tive git -c tive.git.config.js

-  Doing ... 
┍-------------------- node -v --------------------┑

[command]=>     node -v (成功)
[code]=>        0
[output]=> 
v12.5.0

┕-------------------- node -v --------------------┙
-  Doing ... 
┍-------------------- npm -v --------------------┑

[command]=>     npm -v (成功)
[code]=>        0
[output]=> 
7.17.0

┕-------------------- npm -v --------------------┙
\  Doing ... 
┍-------------------- ls --------------------┑

[command]=>     ls (成功)
[code]=>        0
[output]=> 
babel.config.js
node_modules
package.json
public
README.md
src
tive.config.js
vue.config.js

┕-------------------- ls --------------------┙
|  Doing ... 
┍-------------------- git status --------------------┑

[command]=>     git status (成功)
[code]=>        0
[output]=> 
On branch dev
nothing to commit, working directory clean

┕-------------------- git status --------------------┙
√  Run successfully 

 DONE  End of shell script in 935ms

四、tive-cli其他命令

  1. 檢視 tive 的幫助資訊
tive
# or 
tive -h
  1. 檢視 tive create 的幫助資訊
tive create
# or 
tive create -h
  1. 檢視 tive git 的幫助資訊
tive git
# or 
tive git -h

五、TODO

  • tive ssh命令：基於node封裝一套CI/CD命令列工具，做到一行命令完成專案打包、zip壓縮、檔案上傳、解壓上線、重啟服務等等一系列操作。
  • 規劃中...

歡迎訪問：天問部落格

相關文章