使用yeoman搭建脚手架并发布到npm

前言

最近主要在写前端的模板类项目，由于其中的webpack配置和引进数据注入ejs模板的方法大同小异，所以萌发出把该模板框架提取出来作为一个常用的脚手架，也方便以后同事可以进行复用。

之前在看《前端工程化:体系设计与实践》里面有提到过Yeoman构建脚手架,先入为主，所以就用了Yeoman来搭建自己的脚手架

准备

1，node环境

在终端上运行node -v，如果显示node版本号，说明已有node环境

2，安装Yeoman工具集

1 npm install --global yo

验证是否已经安装

1  yo --version

创建一个脚手架的基础框架

1，新建一个文件夹，以generator-name命名，其中name是创建的generator的名字。

npm init 初始化项目，在package.json中增加：

1 // files 名称需和项目目录文件名一致，比如这里的app，项目初始化时便能找到app 下的内容
2  "files": [
3     "app"
4   ],
5   "keywords": [
6     "yeoman-generator"
7   ],

和依赖项

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 }