從零開始作Vue前端架構（9）

前言

相信不少人都用過vue-cli或create-react-app或者相似的腳手架。
腳手架方便咱們複製，粘貼，或者clone代碼庫，並且還能夠更具用戶的選擇，引入用戶所須要的插件。
腳手架每每搭配着早已設計好了架構的項目，而後按需進行拷貝。

Yeoman

介紹

官網介紹: The web's scaffolding tool for modern webapps.

yeoman是一款來作腳手架的工具，咱們藉助它，就能很容易地開發出本身的腳手架了。
yeoman具體的使用，本文不會介紹太多，官網的文檔差很少就夠了，我也會在文章末尾放上本身蒐集的一些參考資料，同窗們本身看看就行了。

安裝

安裝yeoman: npm install -g yo

generator

generator其實就是一個node module，即npm。yeoman根據咱們寫的generator來執行咱們寫的構建代碼。（對怎麼本身選一個npm包不熟悉的同窗，能夠戳這裏>>）
generator文件夾必須以generator-開頭，而後以後跟上自定義的腳手架名字，好比generator-zx-vue，將它作成npm包之後，上傳到npm官網，只有在電腦上全局安裝，而後用yoman運行就行了，以後會詳細介紹。

建立本身的generator

除了手動建立本身的generator項目，咱們還能夠經過別人已經作好的腳手架來建立。
安裝generator-generator: npm install -g generator-generator
而後，運行腳手架: yo generator
以後，咱們就能夠看到一系列的提示，按照提示輸入完信息之後，咱們就有了一份編寫本身的generator的模板項目了。

編寫本身的generator

其實，這個generator腳手架生成的不少文件咱們都不須要管，咱們只須要把注意力放在generator/app這個文件夾下的內容就行了。
templates文件是用來做爲倉庫，咱們在編寫腳本的時候，若是須要哪些文件，就直接去這個倉庫裏copy出來就行了。

劃重點

1. 問題

由於咱們本身作的generator是一個npm包，咱們天然但願對其進行版本管理，用上git，方便從此的迭代。
templates其實也是一個獨立的項目，咱們以前說了，它是一個早已完成了的項目架子，咱們是從gitlab或者github上copy過來的而已。那該怎麼管理這兩個不一樣的項目呢？

2. 解決-git子模塊

git用的6的同窗確定一會兒就想到git子模塊的知識了。
不熟悉的同窗能夠戳 git文檔-子模塊>>

所以，咱們不是把項目copy進templates，也不是git clone進templates，而是先刪除app文件夾下的templates，而後：
git submodule add https://github.com/CodeLittlePrince/vue-construct-for-zx-vue.git templates
這樣的話，咱們就能夠更新本身的倉庫項目（vue-construct-for-zx-vue），generator項目的話，pull子模塊就行了。二者保持獨立，方便迭代和維護。

編寫構建腳本

接下來，咱們就能夠來編寫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() {
    // 複製普通文件
    // https://github.com/sboudrias/mem-fs-editor
    this.fs.copyTpl(
      this.templatePath(),
      this.destinationPath(),
      {
        name: this.name
      },
      {},
      { globOptions:
        {
          dot: true
        }
      }
    )
    // 根據用戶選擇，決定是否安裝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!'))
  }
}

語法很簡單，具體能夠本身看yeoman官方文檔，我簡單的介紹一下幾個比較經常使用的函數，或者說生命週期：

函數名	我用來作什麼
initializing	我用來寫一些歡迎語
prompting	與用戶的交互，好比input、checkbox、confirm等
writing	拷貝和編輯文件
install	安裝依賴，如npm install
end	寫一些如goodbye的結束語

本地測試是否有用

沒發佈上線的npm包，本地測試只須要link一下就行了，到generator根目錄，而後運行npm link，這樣咱們就可使用咱們的generator了，好比，到一個新的空文件夾下運行：yo zx-vue，就能夠看到項目開始自動構建了。
測試完成後，就能夠發佈到npm官網了，發佈流程可參考我另外一篇文章npm-從0開始寫一個npm module

zx-vue

目的

zx-vue是一個以vue-construct做爲模板倉庫的腳手架，爲了方便新項目構建，也爲了從此的新項目可以統一。

使用

首先，安裝全局yeomman和generator-zx-vue：
npm install -g yo
npm install -g generator-zx-vue
而後找一個空的文件夾執行:
yo zx-vue
生成項目之後的操做能夠參考vue-construct
最後，generator-zx-vue的地址是generator-zx-vue

結尾

我以前本來打算把vuex做爲一個可選項，讓用戶選擇是否引入這個庫。
可是，作下來之後發現，由於用到了ejs模板去作這個事情，而後，最終輸出的文件會由於<% if (condition) { %>這種ejs語法致使換行，或者縮進不符合eslint。固然，我也能夠把項目弄的更空一點，把全部vuex的使用清掉，但這樣也不是很好，由於我又想讓用戶跑起來這個項目就能看到整個全家桶的效果在頁面上使用到。
其實還有另一種比較暴力的方法就是，我弄一個有vuex的項目，一個沒有vuex的項目，而後選擇copy哪份，，太暴力。
憋了很久也沒想到什麼很好接受的方法，因此就暫且把vuex也直接帶上。
最後，也但願有想法的同窗還有大佬多多留言，給點建議^_^

原文地址

從零開始作Vue前端架構（9）腳手架

參考資料

yeoman官方文檔

使用Yeoman定製前端腳手架

別人寫的腳手架generator-webapp

文件操做相關

ejs文檔

git-子模塊