目錄

• Yeoman
  • 優(yōu)點 & 缺點
  • 安裝起步
  • 基本使用
  • sub generator
    • 實例：將項目變成cli項目
    • 使用步驟總結
  • 自定義Generator
    • Generator基本結構
    • 名稱規(guī)范
    • 實踐操作
    • 根據模板創(chuàng)建文件
    • 動態(tài)接收用戶輸入數據
    • 自定義一個帶有一定基礎代碼的vue項目腳手架
    • 發(fā)布Generator

Yeoman

一個通用的腳手架工具。

優(yōu)點 & 缺點

安裝起步

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
# 是否發(fā)送代碼覆蓋率到一個平臺上坎穿？
? 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

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

image

sub generator

有時候我們并不需要創(chuàng)建完整的項目結構玲昧，只需要在原有項目的基礎上創(chuàng)建一些特定的文件犯祠，例如在項目中添加yeoman，比如在項目中添加eslint酌呆，babel配置文件衡载。

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

實例：將項目變成cli項目

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

yo node:cli

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

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

image

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

# 將 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官網

image

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

自定義Generator

基于Yeoman搭建自己的腳手架官辈。

Generator基本結構

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

名稱規(guī)范

必須是generator-<name> 的格式

實踐操作

1. 安裝Generator生成器

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

2. 編寫index.js核心文件

# 當前在generator-sample文件夾中，創(chuàng)建app文件夾
mkdir app
cd app

在app文件夾中創(chuàng)建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

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

根據模板創(chuàng)建文件

相對于手動創(chuàng)建每一個文件隔节，模板的方式大大提高了效率

1. 在app目錄下面創(chuàng)建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~


哈哈哈

動態(tài)接收用戶輸入數據

如果我們在命令行中需要動態(tài)獲取用戶輸入的數據怎诫，可以這樣做瘾晃。

1. 在templates中創(chuàng)建一個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再次詢問用戶環(huán)節(jié)會自動調用此方法
     // 在此方法中可以調用父類的 prompt() 方法發(fā)出對用戶的命令行詢問
     // 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文件夾下執(zhí)行

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里面創(chuàng)建目錄結構幻妓，然后將整個的vue項目(自己的)放到templates文件夾里面蹦误。如同下面：

image

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
      )
    })
  }

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

發(fā)布Generator

Generator實際是一個npm模塊胖缤，那么發(fā)布generator就是發(fā)布npm模塊尚镰，我們需要通過npm publish命令發(fā)布成一個公開的模塊就可以阀圾。

1. 先創(chuàng)建本地倉庫，創(chuàng)建.gitignore文件狗唉，把node_modules寫入

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

2. 打開gitHub創(chuàng)建一個遠程倉庫

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

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

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

舉例子吗铐，我發(fā)了一個demo腳手架去官網，沒有什么功能就是練習杏节， generator-csfdemo