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

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

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

準備

1，node環境

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

2，安裝Yeoman工具集

1 npm install --global yo

驗證是否已經安裝git

1  yo --version

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

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

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

1 // files 名稱需和項目目錄文件名一致，好比這裏的app，項目初始化時便能找到app 下的內容
2  "files": [
3     "app"
4   ],
5   "keywords": [
6     "yeoman-generator"
7   ],

和依賴項web

1 "dependencies": {
2     "chalk": "^2.4.2",
3     "glob": "^7.1.3",
4     "lodash": "^4.17.11",
5     "yeoman-generator": "^3.2.0"
6  }

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

 1 // 引進yeoman-generator
 2 let Generator  = require('yeoman-generator');
 3 module.exports = class extends Generator {
 4 // 安裝腳手架時的提問信息
 5   prompting(){
 6     var questions = [
 7       {
 8         type: 'input',
 9         name: 'projectName',
10         message: '輸入項目名稱',
11         default: this.appname
12       },
13       {
14         type: 'input',
15         name: 'projectAuthor',
16         message: '項目開發者',
17         store: true,
18         default: ''
19       },{
20         type: 'input',
21         name: 'projectVersion',
22         message: '項目版本號',
23         default: '0.0.1'
24       }
25     ]
26     return this.prompt(questions).then(
27       function(answers){
28         for(var item in answers){
29           answers.hasOwnProperty(item) && (this[item] = answers[item]);
30         }
31       }.bind(this));
32   }
33   writing(){
34     // 安裝腳手架時複製的內容塊的目錄
35     this.fs.copy(
36       this.templatePath('module/'),
37       this.destinationPath('')
38     );
39   }
40 }

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

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

鏈接項目

1 npm link

驗證

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

發佈到npm上

1，npm註冊

在npm上進行註冊前端工程化

2，登陸

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

3，發佈

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

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

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

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

下載npm上的腳手架

1，確保你本地安裝了yo

1 yo --version

2，下載

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

3，引用

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

github