我想寫一個前端開發工具（三）:優化！從vue-cli學了幾招

　　

　　我從過年開始寫自己的前端工具 coodev，目前已經寫出一個基本的架子，大多數預想的功能都能跑通，還剩一些需要解決的問題也都已經列出來了。本來這一周打算解決對不同后端模板的前后端渲染支持的問題。但是看了一下代碼，當初很多功能寫的還是有很大優化空間的。我打算先停下腳步，多看一些優秀的開源框架的源碼，然后優化整理一下我的前端工具。

　　在選擇閱讀源碼時，我首先想到的就是vue-cli的源碼。畢竟我最初的靈感就是來源於vue-cli。閑話少說，我們先下載一份vue-cli，打開源碼先看package.json熟悉整體的代碼結構，不過這里我建議直接閱讀/bin 文件夾下的幾個文件：vue、 vue-init、 vue-build、 vue-list

　　引用的比較多的比如vue-init就在一開始引用了一大堆的文件

　　

#!/usr/bin/env node

var download = require('download-git-repo')
var program = require('commander')
var exists = require('fs').existsSync
var path = require('path')
var ora = require('ora')
var home = require('user-home')
var tildify = require('tildify')
var chalk = require('chalk')
var inquirer = require('inquirer')
var logger = require('../lib/logger')
var generate = require('../lib/generate')
var checkVersion = require('../lib/check-version')
var warnings = require('../lib/warnings')

　　它們都是干嘛用的，我們調一些比較重要的說一下。

一、優化參數處理

　　先看vue：

#!/usr/bin/env node

require('commander')
  .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')
  .parse(process.argv)

　　可以看出這個文件主要是對 ‘commander’的使用。那么‘commander’這個npm包又是什么呢？字面意思‘指揮官’，我們在 https://www.npmjs.com/ 網站上可以搜一下，會有一些簡單的文檔用例。其實‘commander’就是命令控制器，vue-cli用這個庫來管理用戶輸入的命令，來完成在終端上用戶命令行的交互。

　　回到vue-cli能看到一個很大的鏈試調用，完成了一些列的任務，我們要先了解這些api，就能明白這個文件在干什么了。關於 ‘commander’的API，可以看npm上的官方例子，后續我也會寫一篇有關於使用 ‘commander’的文章。我這里先介紹幾個我用到的：

　　我原先是通過一個map定義命令，用到的地方require一下，通過 process.argv.splice(2) 拿到參數。后來改用‘commander’，就比較省心直接注冊參數：

　　

var program = require('commander');


program
    .version(require('./package').version)
    .option('-i, --init', '初始化項目文件夾')
    .option('-d, --dev', '以開發模式啟動coodev 即時編譯 不壓縮')
    .option('-b, --build', '以生產模式啟動coodev 編譯一次 壓縮')
    .option('-s, --server', '本地server調試')
    .option('-p, --publish', '提交到發布倉庫')
    .parse(process.argv);

/** init */
if (program.init) {
    require('./src/tasks/task-init.js').render();
}

/** dev */
if (program.dev) {
    require('./src/tasks/task-dev.js').render();
}

/** build */
if (program.build) {
    require('./src/tasks/task-build.js').render();
}

/** start */
if (program.start) {
    require('./src/tasks/task-server.js').render();
}

/** publish */
if (program.publish) {
    require('./src/tasks/task-publish.js').render();
}

program.on('--help', function () {
  console.log('  Examples:')
  console.log()
  console.log(chalk.gray('    # create a new project with an official template'))
  console.log('    $ coodev --init')
  console.log()
  console.log(chalk.gray('    # develop project'))
  console.log('    $ coodev --dev')
  console.log()
  console.log(chalk.gray('    # start local server'))
  console.log('    $ coodev --start')
  console.log()
})；

　　其中version和我原來的方式差不多，版本號就直接引用package.json，自己覺得預設的命令就用option定義（簡寫，全名，描述），簡寫和全名是調用的時候用的，描述是在輸入命令'--help'的時候會自動抓取的。最后的‘on’，就像是jquery中的事件綁定一樣，給命令追加額外的處理邏輯。

　　這里只是一些常用的，我后期還要加上一些交互性質的參數處理，比如引導用戶配置工程等等，雖然原來自己寫的也能滿足目前的需求，但為了后期的功能，還是先改成‘commander’好一些。

二、按需拉取github上的模板

　　這事我最想學習的功能。用過vue-cli的朋友都知道有一個這樣的命令 $ vue init webpack-simple yourproject-name 的初始化命令，他會作為幾個腳手架給我們初始化模板，那么模板都放哪了？如果放在vue-cli里面，隨着后期維護，就會越來越大，這不就毀了嗎。我看了一下官方的描述說模板放在了另一個git倉庫里，我也在github里找到了。我起初的時候為了獨立維護模板，也是這樣做的放在了別處，每次coodev發布時，用腳本同步過來，但我的方式雖然快，但是也就是現在模板數少還可以。因此我打算按需要拉取模板。

　　這個功能無疑是在vue-init文件里面，我發現有一個 var download = require('download-git-repo') ，在npm上查了一下，描述是這樣“從節點下載並提取一個git存儲庫”，那么應該就是它了。

　　我的模板放在了github上的另一個倉庫，https://github.com/grARM/coodev-temp-normal。現在想拉到coodev中只需要調用如下代碼：

/** get code from github */
var loadNormalTmpl = function(cb){
    download('grARM/coodev-temp-normal', proPath, function (err) {
        if(err){
            console.log('err', err);
        }
        cb && cb(err);
    });
}

　　其中proPath是我的工程目錄，這樣就比我之前的遞歸文件拷貝高端了不少。

三、交互式命令

　　既然可以從別處拉模板，那么我的coodev一下子就可以精簡很多，我以后可以擁有一大堆模板，都放在github上，我想拉哪一個，就拉哪一個。我還需要給用戶提供交互式的命令。在vue-init中也是有這個例子的。 var inquirer = require('inquirer') 

　　'inquirer'是一個提供交互式命令的npm包，地址： https://www.npmjs.com/package/inquirer。這個庫在Github的examples文件夾里有詳細的例子。每一個問答都會被封裝到answers里。

inquirer.prompt([{
        type: 'list',
        message: 'which template do you need:',
        name: 'template',
        choices: ['normal', 'wap', 'h5']
    }]).then(function (answers) {
        console.log(answers)
            done();
    })        

　　如圖：  

總結：　　

　　就這樣，我就在vue-cli中學習了3招：命令管理、按需拉取模板、交互式命令。

　　接下來就是處理不同的主流后端模板引擎的支持了。