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 shuangfeng1993@163.com
# 做者主頁
? 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官網

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

自定義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

1. 編寫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()
     )
   }
 }

1. 而後用npm link將項目弄到全局
2. 以後在別的項目中開始啓用

mkdir myjob
cd myjob
yo sample

就能夠看到有對應的文件生成。

根據模板建立文件

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

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

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

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

1. 將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)
   }
 }

1. 運行

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>

1. 在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)
   }
 }

1. 在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文件夾裏面。如同下面：

1. 在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'

1. 打開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