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

CodeLittlePrince發表於2018-05-18

前言

相信很多人都用過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也直接帶上。最後，也希望有想法的同學還有大佬多多留言，給點建議^_^