开发时,经常会需要拷贝原有的目录结构和代码,如果有脚手架帮助做这些事,可以省去不少工作量。yeoman的generator就可以帮助我们构建这样的脚手架。

前期准备

首先,确保本地开发环境安装了NodeNPM。需要注意Node的版本,要求在4.0以上,NPM的版本也需要和Node版本相匹配。另外,高版本的Node会支持更多的ES6特性,方便使用新语法来书写代码。

接着,全局安装yeoman

1
npm install yeoman -g

yeoman支持为自己的脚手架建立一个generator,通过运行generator来生成脚手架。

建立项目

首先,创建项目文件夹,文件夹名格式为generator-name,其中name是需要创建的generator的名字。比如我需要创建的是一个webpack用法示例的项目脚手架,文件夹取名为generator-webpack-example

然后,初始化项目,并根据提示输入项目信息。

1
npm init

接着,创建项目所需的结构。使用yeoman执行generator时(比如yo webpack-example),yeoman默认会去执行app目录下的入口文件,代码需要放在app中。并且命令会从app中的templates目录读取模板。详细配置参考官方文章WRITING YOUR OWN YEOMAN GENERATOR

最后项目的结构如下。

1
2
3
4
5
6
- app
|- templates
|- index.js
|- prompts.js
- package.json
- README.md

模板结构

templates目录用来存放产出文件的模板。脚手架的实现使用了lodash,所以模板直接使用lodash提供的模板语法。templates目录中的结构如下。

1
2
3
4
5
6
- templates
|- index_tmpl.html
|- index_tmpl.js
|- package_tmpl.json
|- README_tmpl.md
|- webpack_tmpl.config.js

代码实现

index.js是主文件,用来实现脚手架的具体操作。其中class中使用的各方法是yeoman的generator提供的函数钩子,针对功能填充到对应的钩子函数中即可。可用的钩子方法可参考GENERATOR RUNTIME CONTEXT

首先,安装文件依赖的模块。

1
npm install yeoman-generator chalk yosay lodash deep-extend mkdirp -S

然后,使用Generator的API实现脚手架。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
'use strict';
const Generator = require('yeoman-generator');
const chalk = require('chalk');
const yosay = require('yosay');
const path = require('path');
const _ = require('lodash');
const extend = require('deep-extend');
const mkdirp = require('mkdirp');

const prompts = require('./prompts');

module.exports = class extends Generator {

initializing() {

this.props = {};
}

prompting() {

// 打招呼
this.log(yosay(
'Welcome to the ' + chalk.red('generator-webpack-example') + ' generator!'
));

return this.prompt(prompts).then(props => {
this.props = props;
})
}

writing() {

if (path.basename(this.destinationPath()) !== this.props.projectName) {
this.log(
'Your generator must be inside a folder named ' + this.props.projectName + '\n' +
'I\'ll automatically create this folder.'
);
mkdirp(this.props.projectName);
this.destinationRoot(this.destinationPath(this.props.projectName));
}

// 写README.md
const readmeTpl = _.template(this.fs.read(this.templatePath('README_tmpl.md')));
this.fs.write(this.destinationPath('README.md'), readmeTpl({
projectTitle: this.props.projectTitle,
projectDesc: this.props.projectDesc
}));

// 写package.json
const pkg = this.fs.readJSON(this.templatePath('package_tmpl.json'), {});
extend(pkg, {
devDependencies: {
"webpack": "^3.0.0"
}
});
pkg.keywords = pkg.keywords || [];
pkg.keywords.push('generator-webpack-example');

pkg.name = this.props.projectName;
pkg.description = this.props.projectDesc;
pkg.main = this.props.projectMain;
pkg.author = this.props.projectAuthor;
pkg.license = this.props.projectLicense;

this.fs.writeJSON(this.destinationPath('package.json'), pkg);

// 创建dist目录
mkdirp('dist');

// 写index.html
const indexHtmlTpl = _.template(this.fs.read(this.templatePath('index_tmpl.html')));
this.fs.write(this.destinationPath('dist/index.html'), indexHtmlTpl({
projectName: this.props.projectName
}));

// 创建src目录
mkdirp('src');

// 写webpack.config.js
this.fs.copy(
this.templatePath('webpack_tmpl.config.js'),
this.destinationPath('webpack.config.js')
);

// 写index.js
this.fs.copy(
this.templatePath('index_tmpl.js'),
this.destinationPath('src/index.js')
);
}
};

prompts.js用于存放输入信息指引的配置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
module.exports = [
{
type: 'input',
name: 'projectName',
message: 'Please input project name (webpack-example):',
default: 'webpack-example'
},
{
type: 'input',
name: 'projectTitle',
message: 'Please input project title (webpack示例):',
default: 'webpack示例'
},
{
type: 'input',
name: 'projectDesc',
message: 'Please input project description:'
},
{
type: 'input',
name: 'projectMain',
message: 'Main file (src/index.js):',
default: 'src/index.js'
},
{
type: 'input',
name: 'projectAuthor',
message: 'Author (yanyinhong):',
default: 'yanyinhong'
},
{
type: 'list',
name: 'projectLicense',
message: 'Please choose license:',
choices: ['MIT', 'ISC', 'Apache-2.0', 'AGPL-3.0']
}
]

运行

项目还没有通过NPM发布,可以先将项目链接到全局Node环境中。

1
npm link

然后,尝试执行命令yo generator-name。比如:

1
yo webpack-example

根据提示步骤进行项目的构建:

1
2
3
4
5
6
7
8
9
10
11
12
13
? Please input project name (webpack-example): webpack-example
? Please input project title (webpack示例): webpack示例
? Please input project description:
? Main file (src/index.js): src/index.js
? Author (yanyinhong): yanyinhong
? Please choose license: MIT
Your generator must be inside a folder named webpack-example
I'll automatically create this folder.
create README.md
create package.json
create dist\index.html
create webpack.config.js
create src\index.js

一个项目构建完成了!