摘要：第三篇腳手架依賴的核心庫的源碼解析。這三篇文章都是我在日常學習中總結出來的，文章中涉及到的所有代碼可以從我的上找到。

react作為當前十分流行的前端框架，相信很多前端er都有蠢蠢欲動的學習它的想法。工欲善其事，必先利其器。這篇文章就簡單的給大家介紹一下如何我快速的搭建一個react前端開發環境。主要針對于react小白，大神不喜勿噴。
從標題可以看出，這里不會僅僅只介紹一下react的開發環境如何搭建。我將這個系列分成三篇介紹:

第一篇--快速搭建一個react開發環境。

第二篇--快速開發一個react開發環境腳手架工具。有了這個工具，在任何地方都能夠一鍵生成環境。

第三篇--腳手架依賴的核心庫co的源碼解析。
這三篇文章都是我在日常學習中總結出來的，文章中涉及到的所有代碼可以從我的github--Pavooo上找到。

接下來就開始介紹如何去開發一個簡單的react-start腳手架，從而一鍵生成react開發環境。

首先來看一下腳手架的目錄結構，基本結構如下：

-bin
  |--reactGenerator
-commander
  |--init.js
-config.json
-package.json

bin/reactGenerator：定義基本的命令
commander/init.js：定義命令所對應的操作
config.json：腳手架的一些配置文件
package.json：項目的包文件

從package.json文件中可以看出，項目的基本依賴主要有如下幾個：

"dependencies": {
  "chalk": "^1.1.3",
  "co": "^4.6.0",
  "co-prompt": "^1.0.0",
  "commander": "^2.9.0",
  "ora": "^0.4.1"
}

chalk：給命令行輸出添加顏色
co：執行generator函數
co-prompt：用于命令行交互
commander：定義命令行操作和執行指定的命令
ora：一個很有趣的命令行loading動畫

命令的基本定義主要是在reactGenerator中，了解該文件之前，請確保自己對commander這個庫有基本的了解，不了解的同學請自行前往github。
下面就是reactGenerator的完整內容：

#!/usr/bin/env node

const program = require("commander")
const package = require("../package")

// 定義版本號
program.version(package.version)

// 定義使用的方法
program.usage("")

// 定義腳手架的初始化工作
program
  .command("init")
  .alias("i")
  .description("generator a react project")
  .action(() => {
    require("../commander/init")()
  })

// 解析參數
program.parse(process.argv)

// 如果沒有輸入命令 顯示幫助的內容
if (!program.args.length) {
  program.help()
}

在這個文件中我們只定義一個init操作，當我們全局安裝腳手架工具的時候，我們就可以通過如下命令創建我們的項目。

react-to-start init 或者 react-to-start i

其中react-to-start是你在package.json的bin字段中指定的。

"bin": {
  "react-to-start": "bin/reactGenerator"
}

初始化項目主要使用的是init命令，這個命令的基本定義如下：

const co = require("co")
const chalk = require("chalk")
const prompt = require("co-prompt")
const ora = require("ora")
const fs = require("fs")
const exec = require("child_process").exec
const config = require("../config.json")

const init = () => {
  co(function* () {
    let templateName = yield prompt("what is your template name?  ")
    let projectName =  yield prompt("what is your project name?  ")
    let branchesName = config.branchesName

    if (!branchesName.includes(templateName)) {
      process.stdout.write(chalk.red(`
 ${templateName} does not exit, you can choose one of the template  listed below`))
      branchesName.forEach((name, index) => {
        process.stdout.write(chalk.green(` 
 ${index + 1}. ${name} 
`))
      })
      process.exit(1)
    }

    // 如果說有對應的template 拼接git url進行下載
    let git = ""

    fs.exists("./.git", function(exists) {
      if (exists) {
        git = `git clone ${config.templateUrl} ${projectName} && cd ${projectName} && git checkout ${templateName}`
      } else {
        git = `git init && git clone ${config.templateUrl} ${projectName} && cd ${projectName} && git checkout ${templateName}`
      }

      // 使用 ora 打印出 loading + log
      let spinner = ora(`is downloading the template for ${templateName}...`)
      // 開始 loading 動畫
      spinner.start()

      exec(git, (error, stdout, stderr) => {
        spinner.stop()
        if (error) {
          console.log(error)
          process.exit()
        }
        process.stdout.write(chalk.green("
 $$$ Generation completed! To use step by step as following: "))
        process.stdout.write(chalk.green(`
 1. cd ${projectName} `))
        process.stdout.write(chalk.green(`
 2. npm install 
`))
        process.exit(0)
      })
    })
  })
}

module.exports = init

這個初始化命令的定義十分簡單，有點nodejs基礎且了解co的同學都會很輕松的讀懂，這里就不在多述(感冒好難受的說)。

腳手架所對應的模板目錄就是在上篇文章中所講的內容，不了解的同學請戳從react-start到co源(一)如下就是配置文件：

{
  "templateUrl": "https://github.com/pavoooo/template.git",
  "branchesName": ["react"]
}

templateUrl就是模板地址(暫存在我的github上)，branchesName就是項目的名稱，在github中以分支表示。

以上就是腳手架的基本架構，有點頭暈，有的地方寫的可能有點粗糙。有疑問的同學歡迎留言或者到我的github提issue。晚安。