如何自己開發一個腳手架工具

狼圖騰573發表於2019-05-05

腳手架

是一個命令列工具，安裝對應的命令，通過這些命令執行一些操作，得到一些結果，幫我們快速地完成一些事情。

常用的腳手架工具

  • vue-cli
  • create-react-app
  • webpack
  • gulp
  • grunt

為何要使用

  1. 減少重複性的工作，不在需要複製其他專案和刪除無關的程式碼，或者從零開始建立一個專案
  2. 根據互動情節動態生成專案結構和配置檔案
  3. 多人協作更加方便，不需要檔案傳來傳去

以vue-cli 腳手架使用舉例

npm install -g vue-cli
npm install -g cnpm --registry=https://registry.npm.taobao.org
vue -V|--version  
vue list
vue init <template-name> <project-name>
複製程式碼

如何開發定製自己的一個腳手架呢？

思路

  1. 本地開發好，專案模板上傳到遠端git倉庫，腳手架命令釋出到npm官網
  2. 使用者通過npm安裝腳手架命令，根據命令列提示導向，從遠端git倉庫拉去對於的模板

開始

  1. 獲取命令列引數
    • 原生方法：node index.js aa， 通過process.argv拿到陣列，再處理
    • 藉助第三方庫： commander
  2. 命令對映
    • 常規：node index.js執行指令碼
    • 使用npm link對映，在package.json檔案bin欄位增加命令,如下，就可以使用lv命令了
      • #!/usr/bin/env node 使用node開發命令列工具所執行的js指令碼，必須在頂部加入該行程式碼
      {
    ...,
    "bin": {
        "lv": "./index.js"
    }
}
複製程式碼
  3. 試著搞一個xiaowu-cli吧
    • git倉庫新建兩個模板專案
      • tpl-a
      • tpl-b
      • 注意：package.json檔案有幾個值是變數
    • 命令列引數設計
      • xiaowu --help
      • xiaowu -V|version
      • xiaowu list
      • xiaowu init
    • 命令列互動
      • inquirer提示使用者進行輸入的對話方塊，類似與window.prompt()
    • 視覺美化
      • ora命令皮膚互動效果，相當於loading效果
      • chalk改變輸入文字樣式 target="_blank">chalk改變輸入文字樣式
      • log-symbols各種日誌級別的彩色的符號
    • 下載使用者模板到本地
    • 根據使用者輸入，更新package.json資訊（如專案名，作 者，專案描述）
      • handlebars 模板處理
      • Node.js的fs模組,進行讀寫操作
    • npm釋出（關鍵幾步）
      • npm官網檢索下你的package.json檔案的name包名是否有重名
      • 登入npm賬戶
        npm login
複製程式碼
      • 釋出(專案根目錄)
        npm publish
複製程式碼
    • 如何使用
          npm i -g lvxaiowu-cli
    lv list
    lv init tpl-a abc
複製程式碼

程式碼倉庫地址

相關文章