介绍
Yeoman 是一个通用的脚手架系统,允许通过generator创建任何的 app ,自动安装依赖等待。
yo 是 Yeoman 命令行工具,它允许项目利用脚手架模板来创建。 Yo 和 generators 的使用常用 npm 来安装。
例如安装了 generator-webapp 后,就可以通过 yo webapp 对模板进行初始化,生成工程文件。
generator 开发
通过开发自己的generator就可以实现定制的脚手架。
一个generator的典型格式如下,,
├───package.json
└───generators/
├───app/
│ └───index.js
└─── templates
templates为模板文件夹,通过app/index.js进行配置。
app.js 对generators对象进行拓展,触发其生命周期函数。
- initializing - 初始化方法(检查当前项目状态、获取配置等)
- prompting - 提示用户输入选项的地方
- configuring - 保存配置(创建.editorconfig文件和其他元数据文件)
- default - 如果方法名称与优先级不匹配,则会将其推送到该组
- writing - 执行文件写操作,即项目文件写入文件系统中
- conflicts - 处理冲突的地方(内部使用)
- install - 运行安装的位置(npm、bower)
- end - 最后执行,可清除临时文件
const generators = require('yeoman-generator')
module.exports = generators.Base.extend({
// The name `constructor` is important here
constructor: function () {
generators.Base.apply(this, arguments)
},
prompting() {
return this.prompt([
{
type: 'input',
name: 'appname',
message: 'Your project name',
default: this.appname,
},
]).then(
function (answers) {
this.appname = answers.appname
this.log('app name', answers.appname)
}.bind(this)
)
},
writing() {
const templateDate = {
appname: this.appname,
}
// #复制templates下的所有文件到generator
this.fs.copy(this.templatePath('**'), this.destinationPath(`./${this.appname || 'vitamin-app'}`))
// 渲染
this.fs.copyTpl(
this.templatePath('package.json'),
this.destinationPath(`./${this.appname || 'vitamin-app'}/package.json`),
templateDate
)
},
})
templates 中的文件可以使用ejs 模板引擎。使用copytpl方法去复制作为模板的处理中的文件。
"name": "<%= appname %>",
具体写法可以将generator-webapp库下载后进行参考学习。
generator 的包名格式为 generator-tempname,发布或link后就可以通过 yo tempname 命令进行启动。
用web脚手架工具开发webapps | Yeoman 中文网 (yowebapp.github.io)
The web's scaffolding tool for modern webapps | Yeoman
整合工具
通过 yo 命令进行脚手架安装需要全局安装 yeoman,如果想直接通过 npm create xxx 的方式进行安装,就需要使用yeoman的底层api yeoman-environment 实现。
#!/usr/bin/env node
var yeoman = require('yeoman-environment');
var env = yeoman.createEnv();
// 引入一个generator
env.register(require.resolve('generator-xxx'), 'xxx:app');
// 可以进行拓展 或 直接调用env.run()
var GeneratorNPM = generators.Base.extend(/* put your methods in here */);
env.registerStub(GeneratorNPM, 'xxx:app');
//运行指定命名空间的generator
env.run('xxx:app');
package.json 设置有两个注意点,
- 设置bin字段,指向脚本入口,
- 命名以create-为开头,因为再npm create xxx时默认指向的为 create-xxx包
注:npm create 为 npm init 的别名
从键入npm create xxx-app 到生成项目文件的流程如下
npm create xxx-app
//1 执行 create-xxx-app 中 bin 字段下的脚本
//2 脚本通过env.register(require.resolve('generator-xxx'), 'xxx:app'); 加载generator-xxx,并关联到命名空间 'xxx:app'
//3 通过 env.run('xxx:app') 运行generator,等同于运行 yo xxx 的命令,而对用户来说,不需要单独安装 yeoman。