根據vue-cli手摸手實現一個本身的腳手架

故事背景

身爲一個入門前端七個月的小菜雞，在我入門前端的第一天就接觸到了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-cli -g
// 按照以前的命令
zjs-cli init myDemo

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

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