使用yeoman搭建腳手架併發布到npm

前言

最近主要在寫前端的模板類項目，因爲其中的webpack配置和引進數據注入ejs模板的方法大同小異，因此萌發出把該模板框架提取出來做爲一個經常使用的腳手架，也方便之後同事能夠進行復用。

以前在看《前端工程化:體系設計與實踐》裏面有提到過Yeoman構建腳手架,先入爲主，因此就用了Yeoman來搭建本身的腳手架

準備

1，node環境

在終端上運行node -v，若是顯示node版本號，說明已有node環境

2，安裝Yeoman工具集

npm install --global yo
複製代碼

驗證是否已經安裝

yo --version
複製代碼

建立一個腳手架的基礎框架

1，新建一個文件夾，以generator-name命名，其中name是建立的generator的名字。

npm init 初始化項目，在package.json中增長：

// files 名稱需和項目目錄文件名一致，好比這裏的app，項目初始化時便能找到app 下的內容
 "files": [
    "app"
  ],
  "keywords": [
    "yeoman-generator"
  ],
複製代碼

和依賴項

"dependencies": {
    "chalk": "^2.4.2",
    "glob": "^7.1.3",
    "lodash": "^4.17.11",
    "yeoman-generator": "^3.2.0"
  }
複製代碼

2，新建app文件夾，並新建index.js文件

// 引進yeoman-generator
let Generator  = require('yeoman-generator');
module.exports = class extends Generator {
// 安裝腳手架時的提問信息
  prompting(){
    var questions = [
      {
        type: 'input',
        name: 'projectName',
        message: '輸入項目名稱',
        default: this.appname
      },
      {
        type: 'input',
        name: 'projectAuthor',
        message: '項目開發者',
        store: true,
        default: ''
      },{
        type: 'input',
        name: 'projectVersion',
        message: '項目版本號',
        default: '0.0.1'
      }
    ]
    return this.prompt(questions).then(
      function(answers){
        for(var item in answers){
          answers.hasOwnProperty(item) && (this[item] = answers[item]);
        }
      }.bind(this));
  }
  writing(){
    // 安裝腳手架時複製的內容塊的目錄
    this.fs.copy(
      this.templatePath('module/'),
      this.destinationPath('')
    );
  }
}
複製代碼

3，新建templates文件，並把index.js提到的複製內容塊的目錄下放着你本身的腳手架內容

目錄以下：（其中module爲你的整個腳手架內容）

鏈接項目

npm link
複製代碼

驗證

新建新的項目workpalce，執行yo，若是看到Cms Module說明搭建腳手架成功~

發佈到npm上

1，npm註冊

在npm上進行註冊

2，登陸

在控制檯上執行npm login，能夠看到：

3，發佈

在generator-name項目於根目錄下執行npm public發佈到npm上

注意：每次進行修改後上傳都須要在package.json上修改版本

通常來講，版本分紅三部門：a.b.c

• a表示大版本號，通常是項目較大改動的時候修改，a爲0的時候，表示項目處於開發階段。
• b表示功能更新，或者項目模塊改動的時候增長。
• c表示小改動，如修bug。

下載npm上的腳手架

1，確保你本地安裝了yo

yo --version
複製代碼

2，下載

執行npm install -g generator-cms-module就能夠把腳手架放在你本身的yo上

3，引用

在項目上運行yo，會出現能夠看到Cms Module的我的generator，選擇並按提示輸入信息就能夠把該腳手架的代碼create到項目裏

github