文章内容输出来源：拉勾教育大前度高薪训练营
Yeoman 是一种高效、开源的 Web 应用脚手架搭建系统，意在精简开发过程。Yeoman 因其专注于提供脚手架功能而声誉鹊起，它支持使用各种不同的工具和接口协同优化项目的生成。
常规使用步骤：
1. 明确你的需求；
2. 找到合适的Generator；
3. 全局范围安装找到的Generator；
4. 通过Yo运行对应的Generator；
5. 通过命令行交互填写选项；
6. 生成你所需要的项目结构；
举例：创建一个网页应用
在Yeoman官网Yeoman找到对应的generator;
安装generator-webapp: yarn global add generator-webapp;
运行：yo webapp
基于Yeoman搭建自己的脚手架
Generator本质上就是一个NPM模块
Generator 基本结构
Yeoman的Generator名称结构：generator-name
示例：
在generator-sample文件夹中创建如下图所示文件
此处的index.js将入作用Generator的核心入口
// 此文件作为Generator的核心入口
// 需要导入一个继承自Yeoman Generator的类型
// Yeoman Generator 在工作时会自动调用我们在此类型中定义的一些生命周期方法
// 我们在这些方法中可以通过调用父类提供的一些工具方法实现一些功能，例如文件写入
// fs.write(‘绝对路径‘,‘文件的内容‘)
const Generator = require("yeoman-generator");
module.exports = class extends Generator {
wrting() {
// Yeoman 自动在生成文件阶段调用此方法
// 我们这里尝试往项目目录中写入文件
this.fs.write(
this.destinationPath(‘temp.txt‘),
Math.random().toString()
)
}
}
// 此文件作为Generator的核心入口
// 需要导入一个继承自Yeoman Generator的类型
// Yeoman Generator 在工作时会自动调用我们在此类型中定义的一些生命周期方法
// 我们在这些方法中可以通过调用父类提供的一些工具方法实现一些功能，例如文件写入
// fs.write(‘绝对路径‘,‘文件的内容‘)
const Generator = require("yeoman-generator");
module.exports = class extends Generator {
wrting() {
// Yeoman 自动在生成文件阶段调用此方法
// 我们这里尝试往项目目录中写入文件
// this.fs.write(
// this.destinationPath(‘temp.txt‘),
// Math.random().toString()
// )
// 通过模版方式写入文件到目标目录
// fs.copyTpl(模版文件的路径， 输出文件的路径, 模版文件的上下文)
// 模版文件的路径
const tmpl = this.templatePath(‘foo.txt‘);
// 输出目标的路径
const output = this.destinationPath(‘fll.txt‘);
// 模版数据上下文
const context = { title: ‘hell yeoman‘, success: false };
this.fs.copyTpl(tmpl, output, context);
}
}
总结：相对于手动创建每一个文件， 模版的方式大大的提高了效率；
// 此文件作为 Generator 的核心入口
// 需要导出一个继承自 Yeoman Generator 的类型
// Yeoman Generator 在工作时会自动调用我们在此类型中定义的一些生命周期方法
// 我们在这些方法中可以通过调用父类提供的一些工具方法实现一些功能，例如文件写入
const Generator = require(‘yeoman-generator‘)
module.exports = class extends Generator {
prompting () {
// Yeoman 在询问用户环节会自动调用此方法
// 在此方法中可以调用父类的 prompt() 方法发出对用户的命令行询问
return this.prompt([
{
type: ‘input‘,
name: ‘name‘,
message: ‘Your project name‘,
default: this.appname // appname 为项目生成目录名称
}
])
.then(answers => {
// answers => { name: ‘user input value‘ }
this.answers = answers
})
}
writing () {
// Yeoman 自动在生成文件阶段调用此方法
// // 我们这里尝试往项目目录中写入文件
// this.fs.write(
// this.destinationPath(‘temp.txt‘),
// Math.random().toString()
// )
// -------------------------------------------------------
// // 通过模板方式写入文件到目标目录
// // 模板文件路径
// const tmpl = this.templatePath(‘foo.txt‘)
// // 输出目标路径
// const output = this.destinationPath(‘foo.txt‘)
// // 模板数据上下文
// const context = { title: ‘Hello zce~‘, success: false }
// this.fs.copyTpl(tmpl, output, context)
// -------------------------------------------------------
// 模板文件路径
const tmpl = this.templatePath(‘bar.html‘)
// 输出目标路径
const output = this.destinationPath(‘bar.html‘)
// 模板数据上下文
const context = this.answers
this.fs.copyTpl(tmpl, output, context)
}
}
const Generator = require(‘yeoman-generator‘);
module.exports = class extends Generator {
prompting() {
return this.prompt([{
type: "name",
name: "name",
message: "Your project name",
default: this.appname
}]).then(answers => {
this.answers = answers;
})
}
writing() {
// 把每一个文件通过模版转化到目标路径
const templates = [
‘.browserslistrc‘,
‘.editorconfig‘,
‘.env.development‘,
‘.env.production‘,
‘.eslintrc.js‘,
‘.gitignore‘,
‘babel.config.js‘,
‘package.json‘,
‘postcss.config.js‘,
‘README.md‘,
‘public/favicon.ico‘,
‘public/index.html‘,
‘src/App.vue‘,
‘src/main.js‘,
‘src/router.js‘,
‘src/assets/logo.png‘,
‘src/components/HelloWorld.vue‘,
‘src/store/actions.js‘,
‘src/store/getters.js‘,
‘src/store/index.js‘,
‘src/store/mutations.js‘,
‘src/store/state.js‘,
‘src/utils/request.js‘,
‘src/views/About.vue‘,
‘src/views/Home.vue‘
]
templates.forEach(item => {
// item => 每个文件路径
this.fs.copyTpl(
this.templatePath(item),
this.destinationPath(item),
this.answers
)
})
}
}
原文：https://www.cnblogs.com/lwenl/p/scaffoldingtools.html