yeoman工具的使用以及自定義腳手架

• 前言
• 腳手架原理（工作過程）
• yeoman基本使用
• • 1.安裝yarn
  • 2.安裝yo
  • 3.安裝generator-generator
  • 4.在根目錄下運作yo generator
  • 5.建立項目 test
• 自定義generator
• • 1.建立項目，并切換到該項目
  • 2.yarn（或npm） init初始化項目，生成package.json檔案
  • 3.執行yarn add yeoman-generator
  • 4.在項目根目錄下面建立generator/app/index.js
  • 5.yarn link 将這個子產品連結到全局
  • 6.執行yo sample-vue

前言

yeoman是一款搭建web應用腳手架工具，可以通過yeoman搭配不同的genrator（項目生成器）去建立任何類型的項目，還可以建立自己的generator來定制腳手架。

腳手架原理（工作過程）

1.通過互動指令詢問使用者問題

2.根據使用者回答生成檔案相應的檔案結構

yeoman基本使用

1.安裝yarn

npm install -g yarn
           

2.安裝yo

sudo yarn global add yo
           

注意點：

• yarn 報錯逾時 unexpected error occurred: “https://registry.yarnpkg.com/yo: ETIMEDOUT”.

  按下面一步步更換yarn位址

npm config set registry https://registry.npm.taobao.org  
npm config set disturl https://npm.taobao.org/dist  
yarn config set sass-binary-site http://npm.taobao.org/mirrors/node-sass
           

3.安裝generator-generator

sudo npm install -g generator-generator
           

4.在根目錄下運作yo generator

yo generator-generator
           

注意點：

直接運作yo，可以選擇不同的項目生成器

yo
           

不過要在之前先安裝項目生成器，例如安裝生成vue項目的generator-vue2，可以在npm官網通過搜尋“generator-”找到很多生成器

npm install -g generator-vue2
           

5.建立項目 test

yo vue2
           

生成的項目結構如下：

yarn link

自定義generator

generator本質上就是一個npm子產品，yeoman的generator必須是以generator-name的格式，如果不采用這種格式，yeoman後續就無法找到所定義的generator

1.建立項目，并切換到該項目

mkdir generator-sample-vue
cd generator-sample-vue
           

2.yarn（或npm） init初始化項目，生成package.json檔案

3.執行yarn add yeoman-generator

yeoman-generator提供了生成器的一個基類，這個基類中提供了一些工具函數，使生成器建立的時候更加便捷

4.在項目根目錄下面建立generator/app/index.js

寫入下面的代碼（一定要儲存，要不然下一步就會報錯）：

//主檔案路徑 generators→app →index.js  内容如下
//此檔案作為generator的核心入口，需要導出一個繼承yeoman Generator的類型
// yeomanGenerator在工作時會自動調用，我們在此類型中定義的一些生命周期函數方法
//我們在這些方法中可以通過調用父類的一些工具方法，例如檔案寫入

const Generator = require('yeoman-generator');

module.exports = class extends Generator {
    prompting() { //使用者輸入輸出
     const prompts = [
     //詢問使用者是否進行某些操作，y/n，可以研究一下别的生成器的操作
         {
             type: 'confirm',
             name: 'someAnswer',
             message: 'Would you like to enable this option?',
             default: true
         }
     ];

     return this.prompt(prompts).then(props => {
         // To access props later use this.props.someAnswer;
         this.props = props;
     });
    }
    writing() {
        this.fs.write(
           this.destinationPath("temp.text"),                            Math.random().toString()
        )
    }
}
           

5.yarn link 将這個子產品連結到全局

在和我們剛建立的generator-sample-vue同一目錄下，建立檔案my-sample-vue

mkdir my-sample-vue
           

6.執行yo sample-vue

yo sample-vue
           

執行了剛剛寫在generators→app →index.js裡的算法Math.random().toString()

這樣的話，我們在generator-sample-vue項目裡，建立templates檔案夾，随便建立一些檔案在裡面，如下：

如果my-sample-vue執行yo sample-vue的話，下面的語句會一次将上面的檔案寫入項目（my-sample-vue）裡

templates.forEach(item => {
    this.fs.copyTpl(
        this.templatePath(item),
        this.destinationPath(item)
    )
})
           

my-sample-vue的目錄如下：

自定義的generator-sample-vue生成器就這樣建好了。