Yeoman
2.4
Yeoman 本文档对应版本:v2.0.5
生成器
可以根据模板,自动替换用户在命令行输入的参数,快速生成对应的代码。
创建生成器
已经有很多框架通用的生成器。但针对特定的项目,很多时候自己创建生成器会比较方便。
初始化
一个生成器本质上是一个 node 模块。
-
新建文件夹,格式为
generator-<name>
,name 为生成器的名称。 -
初始化
package.json
npm init -y
-
安装依赖
npm i yeoman-generator
文件结构与命令
命令
yo name
yo name:router
会自动调用文件结构中的对应模块。(默认会查找./generators
下的文件夹)
generator-<name>
文件结构
├───package.json
└───generators/
├───app/
│ └───index.js // yo name
└───router/
└───index.js // yo name:router
拓展 Generator
以app/index.js
为例,通过拓展Generator
来加入自定义逻辑。
自定义的方法通常会按顺序被调用一次。
const Generator = require('yeoman-generator');
module.exports = class extends Generator {
// 重写构造函数
constructor(args, opts) {
super(args, opts);
this.argument('name', { type: String, required: true });
}
// 添加方法
method1() {
this.log('method 1 just ran');
}
method2() {
this.log('method 2 just ran');
}
}
本地运行
在模块根目录中,链接到全局模块
npm link
就可以运行刚才的 generator-name 了
yo name
基于模板生成(多个)文件
可以利用模板初始化组件和页面的基础文件,快速完成准备工作。模板支持变量替换,在复制时会自动替换<%= variable %>
。
./index.js
const Generator = require('yeoman-generator');
module.exports = class extends Generator {
constructor(args, opts) {
super(args, opts);
this.argument('name', { type: String, required: true });
}
write() {
this.log('Writing');
const name = this.options.name;
const nameHyphened = name.replace(/\B[A-Z]/, match => '-' + match.toLowerCase())
const variables = { name, nameHyphened };
const files = ['index.js', 'index.less', 'index.pug', 'index.json'];
files.forEach(file => {
this.fs.copyTpl(
this.templatePath(file),
this.destinationPath(`./${name}/${file}`),
variables,
);
})
this.log('Writing finished');
}
}
./template/index.pug
为例
view.<%= nameHyphened %>
view <%= name %>
运行上下文环境
用户交互
组合
管理依赖
与文件系统交互
存储用户配置
单元测试
调试
集成
📖