Yeoman —— 通用腳手架工具 目錄

目錄

• Yeoman
  • 優點 & 缺點
  • 安裝起步
  • 基本使用
  • sub generator
    • 實例：將項目變成cli項目
    • 使用步驟總結
  • 自定義Generator
    • Generator基本結構
    • 名稱規範
    • 實踐操作
    • 根據模板創建文件
    • 動態接收用戶輸入數據
    • 自定義一個帶有一定基礎代碼的vue項目腳手架
    • 發佈Generator

Yeoman

一個通用的腳手架工具。

優點 & 缺點

優點 & 缺點	內容
優點	更像腳手架的運行平臺，Yeoman搭配不同的generator可以創建任何類型的項目，我們可以根據自己的generator定製自己的前端腳手架
缺點	優點即缺點，過於通用不夠專注

安裝起步

yarn安裝

# 安裝yarn工具進行安裝
npm install -g yarn
# 查看yarn是否安裝好
yarn -v
# 1.22.5
# 全局安裝yeoman
yarn global add yo
# 搭配使用node的generator纔算安裝完畢
yarn global add generator-node

npm安裝

npm install -g yo
npm install -g generator-node

基本使用

yo node

會出現下面的提問

# 模塊名稱
? Module Name my_modules
# (node:13036) [DEP0066] DeprecationWarning: OutgoingMessage.prototype._headers is deprecated
# 已經在npm上存在，是否選擇別的？
? The name above already exists on npm, choose another? No
# 描述
? Description node_modules
# 工程主頁
? Project homepage url https://gitee.com/burningQiQi/
# 作者名稱
? Authors Name csf
# 作者郵箱
? Authors Email [email protected]
# 作者主頁
? Authors Homepage https://gitee.com/burningQiQi/
# 關鍵詞
? Package keywords (comma to split) node,modules,yeoman
# 是否發送代碼覆蓋率到一個平臺上？
? Send coverage reports to coveralls No
# 使用node版本，不寫就是所有的
? Enter Node versions (comma separated) 
# GitHub名稱和組織者
? GitHub username or organization csf
# 項目license
? Which license do you want to use? MIT
#    create package.json
#     force .yo-rc.json
#     force C:\Users\韻七七\.yo-rc-global.json
#    create README.md
#    create .editorconfig
#    create .gitattributes
#    create .gitignore
#    create .travis.yml
#    create .eslintignore
#    create lib\index.js
#    create LICENSE
#    create lib\__tests__\myModules.test.js

安裝完成之後，項目目錄中自動就有了下面的配置文件

sub generator

有時候我們並不需要創建完整的項目結構，只需要在原有項目的基礎上創建一些特定的文件，例如在項目中添加yeoman，比如在項目中添加eslint，babel配置文件。

我們可以通過生成器幫我們實現

實例：將項目變成cli項目

在上面創建項目的基礎上，下面舉例我們通過node下面的cli生成器幫我們生成一些cli的文件，把模塊變成cli應用

yo node:cli

# > conflict package.json
# 詢問我們是不是要重寫package.json文件，我們添加cli的時候會有新的模塊和依賴，選擇yes
# > ? Overwrite package.json? overwrite
# 幫我們重寫了package.json並且創建了一個cli.js的文件
#     force package.json
#     create lib\cli.js

然後可以看到package.json中有了cli的相應配置

我們就可以用名稱當做全局的命令行模塊使用了。

# 將 npm模塊/yarn模塊 鏈接到對應的運行項目中去，方便地對模塊進行調試和測試
npm link / yarn link
# 下面運行成功說明，cli應用可以正常的工作了
my_modules --help
# node_modules

#   Usage
#     $ my_modules [input]

#   Options
#     --foo  Lorem ipsum. [Default: false]

#   Examples
#     $ my_modules
#     unicorns
#     $ my_modules rainbows
#     unicorns & rainbows

上面只是cli的，還可以安裝別的 generator-node

並不是所有的generator都提供子集生成器，需要通過官方文檔確定

使用步驟總結

1. 明確需求
2. 找到合適的Generator yeoman官網

3. 全局範圍安裝找到的Generator
4. 通過Yo運行對應的Generator
5. 通過命令行交互填寫選項
6. 生成你所需要的項目結構

自定義Generator

基於Yeoman搭建自己的腳手架。

Generator基本結構

 𠃊 generators/  ...  生成器目錄
 |   𠃊 app/ ... 默認生成器目錄
 |   |     𠃊 index.js ... 默認生成器實現
+|   𠃊 component/  ... 如果有sub generator寫這個目錄下面
+|         𠃊 index.js ... 其他生成器實現
 𠃊 package.json ... 模塊包配置文件

名稱規範

必須是generator-<name> 的格式

實踐操作

1. 安裝Generator生成器

# 創建並進入目錄
mkdir generator-sample
cd generator-sample
npm init
# 安裝的這個模塊提供了生成器的基類，基類中提供了一些工具函數，讓我們在創建生成器的時候更加的便捷。
npm install yeoman-generator

2. 編寫index.js核心文件

# 當前在generator-sample文件夾中，創建app文件夾
mkdir app
cd app

在app文件夾中創建index.js文件，裏面寫

/**
 * 此文件作爲 Generator 的核心入口
 * 需要導出一個繼承自 Yeoman Generator 的類型
 * Yeoman Generator 在工作時會自動調用我們在此類型中定義的一些生命週期方法
 * 我們在這些方法中可以通過調用父類提供的一些工具方法實現一些功能，例如文件寫入
 */

 const Generator = require('yeoman-generator')

 module.exports = class extends Generator {
   writing () {
     // Yeoman 自動在生成文件階段調用此方法
     // 我們這裏嘗試往項目目錄中寫入文件
     this.fs.write(
       this.destinationPath('temp.txt'),
       Math.random().toString()
     )
   }
 }

3. 然後用npm link將項目弄到全局

4. 之後在別的項目中開始啓用

mkdir myjob
cd myjob
yo sample

就可以看到有對應的文件生成。

根據模板創建文件

相對於手動創建每一個文件，模板的方式大大提高了效率

1. 在app目錄下面創建templates文件夾，裏面添加一個foo.txt的模板文件

這是一個模板文件
內部可以使用 EJS 模板標記輸出數據
例如： <%= title %>

<% if (success) {%>
哈哈哈
<% }%>

2. 將app下面的index.js文件進行下面的修改

 const Generator = require('yeoman-generator')
 
 module.exports = class extends Generator {
   writing () {
    // 使用模板方式寫入文件到目標目錄
    
    // 模板文件路徑
    const tmpl = this.templatePath('foo.txt')
    // 輸出目標路徑
    const output = this.destinationPath('foo.txt')
    // 模板數據上下文
    const context = { title: 'hello xm~', success: true}
    // 這個方法會把模板文件映射到輸出文件上
    this.fs.copyTpl(tmpl, output, context)
   }
 }

3. 運行

cd myjob
yo sample
# create foo.txt

可以看到myjob下面生成了一個foo.txt文件，內容如下：

這是一個模板文件
內部可以使用 EJS 模板標記輸出數據
例如： hello xm~


哈哈哈

動態接收用戶輸入數據

如果我們在命令行中需要動態獲取用戶輸入的數據，可以這樣做。

1. 在templates中創建一個test.html文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><%= name%></title>
</head>
<body>
  <h1><%= title%></h1>
</body>
</html>

2. 在index.js中做如下操作

 const Generator = require('yeoman-generator')

 module.exports = class extends Generator {
   prompting() {
     // Yeoman再次詢問用戶環節會自動調用此方法
     // 在此方法中可以調用父類的 prompt() 方法發出對用戶的命令行詢問
     // this.prompt接收一個數組，數組的每一項都是一個問題
     // this.prompt返回一個promise對象
    
     return this.prompt([
      {
        // input 使用用戶輸入的方式接收提交信息
        type: 'input',
        // 最終得到結果的鍵
        name: 'name',
        // 給用戶的提示
        message: 'your project name is :',
        // 默認值
        default: this.appname // appname 爲項目生成目錄名稱
      },
      {
        type: 'input',
        name: 'title',
        message: 'your title is :',
        default: '目錄'
      },
     ])
     .then(answers => {
       // answers是用戶輸入後我們拿到的一個結果
       // answers => { name: 'user input value', title: 'user input value'}
       // 賦值給屬性我們可以在writing中使用它
       this.answers = answers
     })
   }
   writing () {
    // 使用模板方式寫入文件到目標目錄
    
    // 模板文件路徑
    const tmpl = this.templatePath('test.html')
    // 輸出目標路徑
    const output = this.destinationPath('test.html')
    // 模板數據上下文
    const context = { name: this.answers.name, title: this.answers.title}
    // 這個方法會把模板文件映射到輸出文件上
    this.fs.copyTpl(tmpl, output, context)
   }
 }

3. 在myjob文件夾下執行

cd myjob
yo sample
> ? your project name is : test myjob
> ? your title is : session1
#create test.html

可以看到生成文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>test myjob</title>
</head>
<body>
  <h1>session1</h1>
</body>
</html>

自定義一個帶有一定基礎代碼的vue項目腳手架

1. 也是在generators裏面創建目錄結構，然後將整個的vue項目(自己的)放到templates文件夾裏面。如同下面：

2. 在index.js中進行遍歷輸出

writing () {
    // 把每一個文件都通過模板轉換到目標路徑

    const templates = [
      '.browserslistrc',
      '.editorconfig',
      '.env.development',
      '.env.production',
      '.eslintrc.js',
      '.gitignore',
      'babel.config.js',
      'package.json',
      'postcss.config.js',
      'README.md',
      'public/favicon.ico',
      'public/index.html',
      'src/App.vue',
      'src/main.js',
      'src/router.js',
      'src/assets/logo.png',
      'src/components/HelloWorld.vue',
      'src/store/actions.js',
      'src/store/getters.js',
      'src/store/index.js',
      'src/store/mutations.js',
      'src/store/state.js',
      'src/utils/request.js',
      'src/views/About.vue',
      'src/views/Home.vue'
    ]

    templates.forEach(item => {
      // item => 每個文件路徑
      this.fs.copyTpl(
        this.templatePath(item),
        this.destinationPath(item),
        this.answers
      )
    })
  }

這樣去別的文件夾下執行yo腳手架，就可以得到我們想要的自定義vue目錄結構。

發佈Generator

Generator實際是一個npm模塊，那麼發佈generator就是發佈npm模塊，我們需要通過npm publish命令發佈成一個公開的模塊就可以。

1. 先創建本地倉庫，創建.gitignore文件，把node_modules寫入

# 初始化本地倉庫
git init
git status
git add .
# 進行第一次提交
git commit -m 'init project'

2. 打開gitHub創建一個遠程倉庫

git remote add origin <倉庫ssh地址>
# 把本地代碼推送到遠程master分支
git push -u origin master
# 進行發佈
npm publish
# 確定version\username\password

• 使用淘寶的鏡像源是不可以的，因爲淘寶鏡像源是一個只讀鏡像，需要先改變npm鏡像
• 推送成功之後再npm官網可以看到，下次就可以直接npm安裝了

PS: 如果generator要在官方的倉庫列表中出現，需要在項目名稱中添加yeoman-的關鍵詞，這個時候Yeoman的官方會發現項目。

舉例子，我發了一個demo腳手架去官網，沒有什麼功能就是練習， generator-csfdemo