前端工具-Yeoman模板 + 接收用户输入

开门见山

在前端工具-自定义generator文章中，介绍了如何自定义generator模块，以及生成对应的文件，如果是一个接一个写文件的话 比较费力，好在我们有模板语法通过模板语法，大大提高了效率

模板语法

const Generator = require('yeoman-generator'); module.exports = class extends Generator { //通过模板的方式写入文件到目标目录 模板内部自动使用EJS语法 //模板路径 const templ = this.templatePath('foo.txt'); //输出目标路径 const output = this.destinationPath('foo.txt'); //文件内容 const content = {title:"hello world",success:"success"} //运行 自动把模板文件映射到输出文件上 this.fs.copyTpl(templ,output,consent) }

接收用户输出

不知道大家有没有印象，在vue使用过程中，有需要输入项目名称，那么是怎么做到的呢，其实就是接收用户输入信息而已 为大家演示一下 //只需要实现prompt方法即可， const Generator = require('yeoman-generator'); module.exports = class extends Generator { prompting(){ return this.prompt([{ //可以 type: "input", //输出 name: "name", //key值 name其实就是洗面answer的name message: "Your project name", //提问信息 default: this.appname //默认名字 }]).then(answer => { //支持链式调用 //answer => { name :"user input value" } 并且挂载到this以便于更好地调用 this.answer = answer }) } //通过模板的方式写入文件到目标目录 模板内部自动使用EJS语法 //模板路径 const templ = this.templatePath('foo.txt'); //输出目标路径 const output = this.destinationPath('foo.txt'); //文件内容 const content = this.answer //在这里将content替换成this.answer //运行 自动把模板文件映射到输出文件上 this.fs.copyTpl(templ,output,consent) }

谢谢观看，如有不足，敬请指教