Yeoman的使用與自定義Generator的建立

安裝 yeoman

npm install yo

yarn global add yo

安裝Generator

例如

npm install generator-node

npm install generator-webapp

或者使用yarn

yarn global add generator-webapp

其他需求可參考官方文檔

官方generators查詢

使用對應的generators

使用指令

例如：yo webapp

yo 後跟generator下載下傳的類别name

自定義一個generator

其本質上就是一個npm工具，他的基本結構遵循如下

[外鍊圖檔轉存失敗,源站可能有防盜鍊機制,建議将圖檔儲存下來直接上傳(img-kCSkpxNc-1610605403519)(C:\Users\EDZ\AppData\Roaming\Typora\typora-user-images\image-20210114135107110.png)]

1. 建立一個檔案夾，檔案夾的名字必須是generator-name！
2. yarn init 進行初始化
3. yarn add yeoman-generator 下載下傳一個自定義generator 的平台

4. 建立目錄：

   ​ generators/app/index.js

   注意：generators 必須是複數形式

5. 在index.js寫代碼

const Generator = require('yeoman-generator')
       // generator 和 核心入口
   module.exports = class extends Generator {
       // 自動導出生命周期方法
       // 檔案寫入的功能
       writing() {
           //     // yeoman 自動調用這個方法
              this.fs.write(         	 //接收兩個參數 一個是路徑 ，一個是寫入内容	   
              		this.destinationPath('test.txt'),
                   Math.random().toString()
                )
       }
   
   }
           

1. 使用指令 yarn init 進行指令綁定 ，這樣就可以直接在指令行内輸入剛剛的自定義的generator 的名字來使用這個generator

使用自定義的generator

1. 建立一個檔案夾，用來存放将要生成的檔案
2. 使用指令 yo name（這個name就是剛剛建立generator的name）

會發現自動生成了一個檔案

通過模闆來建立檔案

1. 在剛剛的app檔案下建立一個名為templates 的檔案夾
2. 建立一個檔案foo.txt 作為輸出目标

   

3. 在index.js中編寫代碼 ( 因為是換了一種方式，是以要改變原來的代碼)

   const Generator = require('yeoman-generator')
       // generator 和 核心入口
   module.exports = class extends Generator {
       // 自動導出生命周期方法
       // 檔案寫入的功能
       writing() {
           // 模闆檔案的目錄
           const tmpl = this.templatePath('foo.txt')
           // 輸出目标路徑
           const output = this.destinationPath('foo.txt')
           // 模闆資料上下文
           const context = { title: 'Generator ...', success: false }
           this.fs.copyTpl(tmpl, output, context)
       }
   
   }
              

4. 傳回到我們剛剛建立的檔案夾，使用指令 yo name

   我們可以看到目錄中多了一個foo.txt 檔案

同時EJS文法也生效了