摘要：那該怎么管理這兩個(gè)不同的項(xiàng)目呢解決子模塊用的的同學(xué)肯定一下子就想到子模塊的知識(shí)了。最后，也希望有想法的同學(xué)還有大佬多多留言，給點(diǎn)建議原文地址從零開始做前端架構(gòu)腳手架參考資料官方文檔使用定制前端腳手架別人寫的腳手架文件操作相關(guān)文檔子模塊

相信很多人都用過vue-cli或create-react-app或者類似的腳手架。
腳手架方便我們復(fù)制，粘貼，或者clone代碼庫，而且還可以更具用戶的選擇，引入用戶所需要的插件。
腳手架往往搭配著早已設(shè)計(jì)好了架構(gòu)的項(xiàng)目，然后按需進(jìn)行拷貝。

官網(wǎng)介紹: The web"s scaffolding tool for modern webapps.

yeoman是一款來做腳手架的工具，我們借助它，就能很容易地開發(fā)出自己的腳手架了。
yeoman具體的使用，本文不會(huì)介紹太多，官網(wǎng)的文檔差不多就夠了，我也會(huì)在文章末尾放上自己搜集的一些參考資料，同學(xué)們自己看看就好了。

安裝yeoman: npm install -g yo

generator其實(shí)就是一個(gè)node module，即npm。yeoman根據(jù)我們寫的generator來執(zhí)行我們寫的構(gòu)建代碼。（對(duì)怎么自己選一個(gè)npm包不熟悉的同學(xué)，可以戳這里>>）
generator文件夾必須以generator-開頭，然后之后跟上自定義的腳手架名字，比如generator-zx-vue，將它做成npm包以后，上傳到npm官網(wǎng)，只有在電腦上全局安裝，然后用yoman運(yùn)行就好了，之后會(huì)詳細(xì)介紹。

除了手動(dòng)創(chuàng)建自己的generator項(xiàng)目，我們還可以通過別人已經(jīng)做好的腳手架來創(chuàng)建。
安裝generator-generator: npm install -g generator-generator
然后，運(yùn)行腳手架: yo generator
之后，我們就可以看到一系列的提示，按照提示輸入完信息以后，我們就有了一份編寫自己的generator的模板項(xiàng)目了。

其實(shí)，這個(gè)generator腳手架生成的很多文件我們都不需要管，我們只需要把注意力放在generator/app這個(gè)文件夾下的內(nèi)容就好了。
templates文件是用來作為倉庫，我們?cè)诰帉懩_本的時(shí)候，如果需要哪些文件，就直接去這個(gè)倉庫里copy出來就好了。

因?yàn)槲覀冏约鹤龅膅enerator是一個(gè)npm包，我們自然希望對(duì)其進(jìn)行版本管理，用上git，方便今后的迭代。
templates其實(shí)也是一個(gè)獨(dú)立的項(xiàng)目，我們之前說了，它是一個(gè)早已完成了的項(xiàng)目架子，我們是從gitlab或者github上copy過來的而已。那該怎么管理這兩個(gè)不同的項(xiàng)目呢？

git用的6的同學(xué)肯定一下子就想到git子模塊的知識(shí)了。
不熟悉的同學(xué)可以戳 git文檔-子模塊>>

因此，我們不是把項(xiàng)目copy進(jìn)templates，也不是git clone進(jìn)templates，而是先刪除app文件夾下的templates，然后：
git submodule add https://github.com/CodeLittlePrince/vue-construct-for-zx-vue.git templates
這樣的話，我們就可以更新自己的倉庫項(xiàng)目（vue-construct-for-zx-vue），generator項(xiàng)目的話，pull子模塊就好了。兩者保持獨(dú)立，方便迭代和維護(hù)。

接下來，我們就可以來編寫app文件夾下的index.js文件了：

const Generator = require("yeoman-generator")
const chalk = require("chalk")
const yosay = require("yosay")
const path = require("path")
const fs = require("fs")

module.exports = class extends Generator {
  initializing() {
    // 打印歡迎語
    this.log(
      yosay(`Welcome to the shining ${chalk.cyan("generator-zx-vue")} generator!`)
    )
  }
  prompting() {
    // 讓用戶選擇是否需要包含vuex
    const prompts = [
      {
        type: "input",
        name: "name",
        message: "Name of project:",
        default: path.basename(process.cwd())
      },
      {
        type: "input",
        name: "description",
        message: "Description:",
        default: "",
      },
      // {
      //   type: "confirm",
      //   name: "includeVuex",
      //   message: "Would you like to include Vuex in your project?",
      //   default: false,
      // }
    ]
    return this.prompt(prompts).then(answers => {
      this.name = answers.name
      this.description = answers.description
      // this.includeVuex = answers.includeVuex
      this.log(chalk.green("name: ", this.name))
      this.log(chalk.green("description: ", this.description))
      // this.log(chalk.green("includeVuex: ", this.includeVuex))
    })
  }

  writing() {
    // 復(fù)制普通文件
    // https://github.com/sboudrias/mem-fs-editor
    this.fs.copyTpl(
      this.templatePath(),
      this.destinationPath(),
      {
        name: this.name
      },
      {},
      { globOptions:
        {
          dot: true
        }
      }
    )
    // 根據(jù)用戶選擇，決定是否安裝vuex
    if (this.includeVuex) {
      const pkgJson = {
        name: this.name,
        description: this.description,
        // dependencies: {
        //   vuex: "^3.0.1"
        // }
      }
      // Extend or create package.json file in destination path
      this.fs.extendJSON(this.destinationPath("package.json"), pkgJson)
    }
  }

  install() {
    this.npmInstall()
  }

  end() {
    this.log(chalk.green("Construction completed!"))
  }
}

語法很簡(jiǎn)單，具體可以自己看yeoman官方文檔，我簡(jiǎn)單的介紹一下幾個(gè)比較常用的函數(shù)，或者說生命周期：

沒發(fā)布上線的npm包，本地測(cè)試只需要link一下就好了，到generator根目錄，然后運(yùn)行npm link，這樣我們就可以使用我們的generator了，比如，到一個(gè)新的空文件夾下運(yùn)行：yo zx-vue，就可以看到項(xiàng)目開始自動(dòng)構(gòu)建了。
測(cè)試完成后，就可以發(fā)布到npm官網(wǎng)了，發(fā)布流程可參考我另一篇文章npm-從0開始寫一個(gè)npm module

zx-vue是一個(gè)以vue-construct作為模板倉庫的腳手架，為了方便新項(xiàng)目構(gòu)建，也為了今后的新項(xiàng)目能夠統(tǒng)一。

首先，安裝全局yeomman和generator-zx-vue：
npm install -g yo
npm install -g generator-zx-vue
然后找一個(gè)空的文件夾執(zhí)行:
yo zx-vue
生成項(xiàng)目以后的操作可以參考vue-construct
最后，generator-zx-vue的地址是generator-zx-vue

我之前原本打算把vuex作為一個(gè)可選項(xiàng)，讓用戶選擇是否引入這個(gè)庫。
但是，做下來以后發(fā)現(xiàn)，因?yàn)橛玫搅薳js模板去做這個(gè)事情，然后，最終輸出的文件會(huì)因?yàn)?b><% if (condition) { %>這種ejs語法導(dǎo)致?lián)Q行，或者縮進(jìn)不符合eslint。當(dāng)然，我也可以把項(xiàng)目弄的更空一點(diǎn)，把所有vuex的使用清掉，但這樣也不是很好，因?yàn)槲矣窒胱層脩襞芷饋磉@個(gè)項(xiàng)目就能看到整個(gè)全家桶的效果在頁面上使用到。
其實(shí)還有另外一種比較暴力的方法就是，我弄一個(gè)有vuex的項(xiàng)目，一個(gè)沒有vuex的項(xiàng)目，然后選擇copy哪份，，太暴力。
憋了好久也沒想到什么很好接受的方法，所以就暫且把vuex也直接帶上。
最后，也希望有想法的同學(xué)還有大佬多多留言，給點(diǎn)建議^_^

從零開始做Vue前端架構(gòu)（9）腳手架

yeoman官方文檔

使用Yeoman定制前端腳手架

別人寫的腳手架generator-webapp

文件操作相關(guān)

ejs文檔

git-子模塊