vue-cli腳手架原理以及製作方式（一）

COCOYIN發表於2018-05-26
Vue

關鍵技術

  • 兩個包和一個npm命令

commander 包用來解析命令列引數

download-git-repo 包 用來從github上面拉取模板地址

npm link 該命令主要用於開發過程中將包加入全域性變數使用

製作流程

  • 使用npm init初始化一個 package.json 檔案

vue-cli腳手架原理以及製作方式（一）

  • 新建一個 bin目錄，並新建一個b2c檔案(檔名稱可以自行取名)，不帶字尾名，在package.json檔案中加入一個bin物件

vue-cli腳手架原理以及製作方式（一）

  • 開啟b2c檔案，在頭部增加如下語句,為了相容不同系統下的環境變數
#! /usr/bin/env node
複製程式碼
  • 這時，我們引入一個 commander 包用來解析使用者輸入的引數,執行如下命令
//命令列中執行如下命令
$ npm install commander -S
複製程式碼

b2c檔案中寫如下程式碼

#! /usr/bin/env node

require('commander')
    .version(require('../package').version)
    .usage('<command> [options]')
    .command('init', '初始化模板專案')
    .parse(process.argv)
複製程式碼

在bin目錄下新建一個b2c-init檔案，注意不帶字尾名的，這時專案目錄結構如下

 |__ bin
    |__ b2c
    |__ b2c-init
 |__ package.json
 |__ README.MD
複製程式碼

commander包的詳細用法參見npm官方倉庫：commander.js文件

  • 在根目錄下使用 npm link 將腳手架命令掛載到全域性

注意：這裡要保證資料夾名稱和package.json中的name值一樣

vue-cli腳手架原理以及製作方式（一）

  • 在b2c-init檔案中寫console.log(1)，然後在其他任意目錄執行如下命令,如果能正常列印出1，基本上就成功了，後面只需要熟悉一下commander這個包如何解析命令列引數即可
 $ b2c init 
複製程式碼

總結

本文主要講解了開發腳手架的第一步，基本上看完這篇文章，就能夠入門了，後面的東西都可以自學，比如像使用download-git-repo包來從github上面拉取模板等等這些都十分容易

推薦一個初始化模板的npm包

ths-clis

相關文章