故事背景

身為一個入門前端七個月的小菜雞，在我入門前端的第一天就接觸到了vue，並且死皮賴臉的跟他打了這麼久的交到，還記得第一次用vue init webpack 這句命令一下生成一個模板的時候那種心情，當時我就想，要是自己也能寫一個的話，那會是灰常吃雞的吧 o(￣▽￣)ブ,所以說今天我們也要簡單實現一個自己的腳手架

認識bin

bin的作用

首先我們先來了解一下這個bin ，這個bin和我們最開始用的vue init webpack 這個命令是息息相關的

還記得我們在最開始安裝vue-cli的時候嘛

    npm install vue-cli -g
    

• 這條命令的意思是把vue-cli 安裝到全域性 ，以至於你再任何一個地方開啟cmd 的時候都能夠使用 vue init webpack

vue init webpack 這條命令實際上是執行的vue-cli 裡邊 package.json 裡邊的bin屬性下的命令

這個檔案大概位置如下

這個路徑裡邊有隱藏的路徑，在查詢的時候記得開啟隱藏目錄可見

這個bin裡邊大概長成這個樣子

由圖中可見，這裡邊有三個命令

    vue vue-init  vue-list

• 這個三個命令的意思是執行對應的檔案，Npm會在node_modules/.bin/目錄下建立符號連結。又因為node_modules/.bin/目錄會在執行時加入系統的PATH變數，因此在執行npm時，就可以不帶路徑，直接通過命令來呼叫這些檔案。

bin所執行的檔案和引數

那麼說到這裡你肯定會好奇這個檔案是怎麼做到生成模板的對吧，那麼我們就來看一下被執行的這個檔案到底是何方神聖

    #!/usr/bin/env node

    const program = require('commander')
    
    program
      .version(require('../package').version)
      .usage('<command> [options]')
      .command('init', 'generate a new project from a template')
      .command('list', 'list available official templates')
      .command('build', 'prototype a new project')
      .command('create', '(for v3 warning only)')
    
    program.parse(process.argv)
 

上邊這一坨程式碼就是 執行vue init webpack 的檔案所有內容

首先最重要的一點就是 第一句 #!/usr/bin/env node

這句程式碼不可以沒有， #! 指明這個指令碼檔案的解釋程式，然後這個/usr/bin/env 是說在系統的PATH目錄中查詢

這句話整體的意思就是說會有一個新的shell執行指定的指令碼，執行這個指令碼的解釋程式是node
如果不加這句程式碼的話是會報錯的

然後下邊這個引入了一個commander 包 這是一個很牛逼的大佬寫的一個關於命令列一些操作的包，command 裡邊的是定義一些子命令，然後後邊在跟的引數，這裡暫且不深扒了，附上中文文件

commander中文文件

寫一個自定義命令

好，那麼我們現在瞭解了bin的基本概念和大致流程，下面我們來寫一個自己的命令

首先新建一個資料夾， 在package.json裡邊加上這麼一句程式碼

 "bin": {
    "zjs-cli": "main.js"
  },

和新建一個main.js的檔案

然後莫慌，我們還需要再執行一個命令就是

npm link 

我們之前全域性安裝的都會預設在npm的node_modules目錄下，這個命令可以簡單的理解為在npm的node_modules建立了一個快捷方式

到此為止我們得自定義命令算是走通了，接下來我們說一說檔案裡邊得內容

搭建腳手架

腳手架得工作流程

上邊我們知道了bin得作用並且，把我們得自定義命令和檔案關聯了起來，那麼腳手架具體是怎麼操作的呢，大概步驟如下

• 進入檔案，根據指定的地址和編譯器，執行我們的js

• 從命令列接受引數，執行對應的操作

• 互動性的詢問問題，根據配置選擇拉取的模板

• 從git拉取模板

我們之前用的vue的腳手架大概的流程就是這樣的

安裝依賴

在進入檔案之後，為了能夠得到命令列的操作我們就要安裝一些依賴了比如說commander的這個包

    npm install commander 
    

然後命令列預設的字型顏色是黑白色的，我們可以引入一些命令列互動的包，不得不說這些寫包的大佬是真牛逼，啥都能寫

    npm install chalk

vue 有一個 init 子命令 ， 那我們也叫init好了

    const cmd = require("commander");
    const chalk = require('chalk')

    cmd.command('init').description('初始化模板').action(async (args) => {
        // 。。。
    })
    
    cmd.parse(process.argv) 
    

• 其中command 是新增子命令的

• description是描述

• action 是執行這個命令的回撥

• parse 是解析你命令列裡邊傳進來的引數 比如 你寫了一個 zjs-cli init demo ， 那麼這個時候 回撥裡邊的args的值就是demo這個字串

然後需要注意process上的是argv ， 裡邊用的是args ，這裡不是筆誤，當時我剛開始玩的時候納悶了好半天

然後做一些互動，讓我們得腳手架看起來更順溜一些

npm install inquirer

npm install ora

上邊這兩個分別是載入動畫和回答問題得，比如vue在新建模板得時候問你的一些列問題，還有那個下載中等待得loading動畫

不要問我怎麼能記住這麼多得包名字，因為我是看的vue-cli原始碼認識得。。。。

拉取git

這裡單獨把拉取git拿出來說，雖所內容不多，但畢竟也是今天的主角 o(￣▽￣)ブ

那麼問題來了，怎麼下載模板呢？很簡單，當然還是npm包。。。。

npm install download-git-repo

這個包是可以從github上邊下載包的

比如說我之前寫的一個demo他叫zjs-template，那麼拉取的路徑就是我得git路徑加專案名稱

let url = 'zhou1591/zjs-template'

// 然後第二個引數是拉取下來後的名稱

// 這裡我選擇用命令列裡邊傳過來的引數做名字

let  name = 'args'

然後根據api拉取模板，關閉

let downGit = (name) => {
downLoad(url, name, {
        clone
    }, err => {
        process.exit(1)
    })
}

完整程式碼如下

// git包
const downLoad = require('download-git-repo')
// 動畫
const ora = require('ora')


let url = 'zhou1591/zjs-template'
let clone = false
let downGit = (name) => {
    const spinner = ora('正在拉取模板...')
    spinner.start()
    downLoad(url, name, {
        clone
    }, err => {
        spinner.stop()
        console.log(err?err:"專案建立成功")
        process.exit(1)
    })

}
module.exports = downGit

引到main.js裡邊跑起來就好了，到此為止一個簡單的腳手架已經ok了，就差了最後一步

釋出腳手架

建立npm賬號併發布

我們寫完了一個自己的腳手架之後，當然是想迫不及待的體驗一番的

首先我們建立一個npm的賬號npm官網

之後在我們剛才的專案裡邊

• npm login 輸入你的賬號密碼郵箱

• 然後登陸成功後 npm publish 推送

• package.json 裡邊的name 是你的npm包釋出的名稱

• keywords 是搜尋你的包的關鍵字

• description是你的包描述

• version 是你的版本號

第一次釋出npm包可能會遇到的問題

這個是說已經有重複名字的包了 你沒有許可權去推

• you must verify your email before publishing a new package: https://www.npmjs.com/email-edit : "your module name"

這個是說第一次釋出的時候 說你需要驗證郵箱，在你登陸的最上方

• 每次釋出的時候需要更改你的版本號

• 還有一個比較重要的npm ERR! no_perms Private mode enable, only admin can publish this module:

這個是說你沒有在npm最開始的源上邊，你可能切換比如淘寶等等其他的源，當時我就是因為用了公司的源，怎麼登陸都登陸不上去，很蛋疼

完美撒花

好了，到這裡我們的第一個腳手架就算是完事了， 執行一下

// 全域性安裝一下
npm install zjs-template -g
// 按照之前的命令
zjs-cli init myDemo

我得zjs-cli的git地址 https://github.com/zhou1591/zjs-cli/
我得zjs-template的git地址 https://github.com/zhou1591/zjs-template

希望我們每一個前端都喜歡前端，都能夠在學習中不斷充實自己 o(￣▽￣)ブ

下一篇我會簡單實現一個vuex ， 喜歡的請點個贊