如何本身開發一個腳手架工具

腳手架

是一個命令行工具，安裝對應的命令，經過這些命令執行一些操做，獲得一些結果，幫咱們快速地完成一些事情。

經常使用的腳手架工具

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

爲什麼要使用

1. 減小重複性的工做，不在須要複製其餘項目和刪除無關的代碼，或者從零開始建立一個項目
2. 根據互動情節動態生成項目結構和配置文件
3. 多人協做更加方便，不須要文件傳來傳去

以vue-cli 腳手架使用舉例

npm install -g @vue/cli-init
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. 試着本身開發個簡單的腳手架（lv-cli）吧
   • git倉庫新建兩個模板項目
     • tpl-a
     • tpl-b
     • 注意：package.json文件有幾個值是變量
   • 命令行參數設計
     • lv --help
     • lv -V|version
     • lv list
     • lv init
   • 命令行交互
     • inquirer提示用戶進行輸入的對話框，相似與window.prompt()
   • 視覺美化
     • ora命令面板交互效果，至關於loading效果
     • chalk改變輸入文字樣式 target="_blank">chalk改變輸入文字樣式
     • log-symbols各類日誌級別的彩色的符號
   • 下載用戶模板到本地
     • download-git-repo 是用來clone遠程倉庫代碼到本地的包
   • 根據用戶輸入，更新package.json信息（如項目名，做 者，項目描述）
     • handlebars 模板處理
     • Node.js的fs模塊,進行讀寫操做
   • npm發佈（關鍵幾步）
     • npm官網檢索下你的package.json文件的name包名是否有重名
     • 登陸npm帳戶

       npm login
       複製代碼

     • 發佈(項目根目錄)

       npm publish
       複製代碼

   • 如何使用

     npm i -g lv-cli
         lv list
         lv init tpl-a abc
     複製代碼