從零搭建前端開發環境（零）——終極篇：5.構建自己的前端腳手架

我們在什麼情況下會進行項目初始化呢？除了新啓動一個項目，還有一個場景，就是我們要學習新東西的時候，想要運行在一個無限接近現實的開發環境，而且還要可以自由配置一些東西（我在吐槽create-react-app）。比如，想學react + mobx，webapck、babel、各種loader、eslint、路由、單測都需要先安裝好。這時候，如果有腳手架，一條命令搞定。

腳手架，聽起來很高大上的一個東西。不要怕，其實入門非常簡單。其原理就是準備好一個（或幾個）最佳實踐的目錄結構項目，然後用腳手架拉取就可以了。包教包會，讓我們開始吧！

參考文獻：

教你從零開始搭建一款前端腳手架工具

跟着老司機玩轉Node命令行

1、建立模版源

說白了，就是把咱們之前一直再做的demo項目，推到一個遠程的誰都能訪問的地方，比如github。至於如何建立，這裏就不做說明了，如果暫時不能完成這步，那麼用筆者的項目地址（https://github.com/zhaolandelong/base-tpl.git）來練習也可以。

2、構建項目及安裝依賴

$ mkdir my-cli && cd my-cli && npm init -y && npm i -S chalk co co-prompt commander

新建 bin/cli 文件

#!/usr/bin/env node --harmony
'use strict'
 // 定義腳手架的文件路徑
process.env.NODE_PATH = __dirname + '/../node_modules/'

const program = require('commander')

 // 定義當前版本
program
    .version(require('../package').version )

// 定義使用方法
program
    .usage('<command>')

program
    .command('init')
    .description('Generate a new project')
    .action(() => {
        require('../command/init')()
    })

program.parse(process.argv)

if(!program.args.length){
  program.help()
}

新建 command/init.js 文件

'use strict'
const exec = require('child_process').exec
const co = require('co')
const prompt = require('co-prompt')
const config = require('../templates')
const chalk = require('chalk')

module.exports = () => {
 co(function *() {
    // 處理用戶輸入
      let tplName = 'base'
      let projectName = yield prompt('Project name: ')
      let gitUrl
      let branch

    if (!config.tpl[tplName]) {
        console.log(chalk.red('\n × Template does not exit!'))
        process.exit()
    }
    gitUrl = config.tpl[tplName].url
    branch = config.tpl[tplName].branch

    // git命令，遠程拉取項目並自定義項目名
    let cmdStr = `git clone ${gitUrl} ${projectName} && cd ${projectName} && git checkout ${branch}`

    console.log(chalk.white('\n Start generating...'))

    exec(cmdStr, (error, stdout, stderr) => {
      if (error) {
        console.log(error)
        process.exit()
      }
      console.log(chalk.green('\n √ Generation completed!'))
      console.log(`\n cd ${projectName} && npm install \n`)
      process.exit()
    })
  })
}

新建templates.json文件

{
  "tpl": {
    "base": {
      "url": "https://github.com/zhaolandelong/base-tpl.git", // 此處可替換爲自己的項目地址
      "branch": "master"
    }
  }
}

3、全局使用

在package.json里加入

"bin": {
  "my-cli": "bin/cli"
},

運行綁定全局命令

$ npm link

切換到一個想要創建項目的目錄，運行

$ my-cli init

輸入你想給項目起的名字，比如my-project。可以看到，我們之前寫的demo項目已經成功的被copy下來，就這麼簡單！完成！

本文只是介紹瞭如何簡單的無腦構建一個腳手架，要是想做更靈活的配置，還需要研究commander文檔。另外，借鑑一些最佳實踐也是很必要的，比如vue-cli，反正足夠我研究一陣子了。