工程概述所有旨在提高效率、降低成本和质量保证的方法都是工程创建通过脚手架工具创建项目编码和格式化代码编译、构建、打包预览/测试WebServer/MockHMRSourceMap提交GitHooks持续集成部署CI/CD自动发布脚手架工具本质：创建项目基础设施，提供项目规范和约定Yeoman（一个通用的脚手架工具）基本上是用来安装yeomannpminstall-gyo然后安装需要的generators，Generators是一个npm包命名生成器-XYZ。这里安装nodegeneratornpminstall-ggenerator-node执行脚手架搭建新项目yonodeSubGenerator需要判断是否有SubGenerator安装对应的subGeneratoronode:clilinkcurrentmoduletoglobalnpmlink执行查看结果my-module--help//输出测试用法$my-module[input]Options--fooLoremipsum。[默认:false]Examples$my-moduleunicorns$my-modulerainbowsunicorns&rainbows使用步骤总结清楚需求，找到合适的Generator将找到的Generator安装在全局范围内，运行相应的Generator通过yo填写optionsthrough命令行交互生成需要的项目结构自定义Generator安装Generator基类yarnaddyeoman-generator创建generators/app/index.js作为Generator的核心入口//这个文件是Generator的核心入口//需要导出一个类型继承自YeomanGenerator//YeomanGenerator在工作时会自动调用我们定义在这个类型中的一些生命周期方法//我们可以在这些方法中调用它们父类提供的一些工具和方法实现一些功能，比如文件写入constGenerator=require("yeoman-generator");module.exports=classextendsGenerator{writing(){//Yeoman在文件生成阶段自动调用这个方法this.fs.write(this.destinationPath("temp.txt"),Math.random().toString());}};执行npmlink后，新建模块，执行yosample，根据模板创建文件//templatemodule.exports=classextendsGenerator{writing(){//模板文件路径consttmpl=this.templatePath("foo.txt");//输出文件路径constoutput=this.destinationPath("foo.txt");//模板数据上下文constcontext={title:"hello",success:true};this.fs.copyTpl（tmpl，输出，上下文）；}};接收用户输入module.exports=classextendsGenerator{prompting(){//Yeoman在询问用户时会自动调用这个方法//在这个方法中可以调用父类的prompt()方法发出命令行向用户查询returnthis.prompt([{type:"input",//用户输入类名:"title",//接收参数的键message:"messagetitle",//promptdefault:"hello",//默认值},{type:"input",//用户输入类名:"success",//接收参数的键message:"消息状态",//提示default:false,//默认值},]).then((answer)=>{this.answer=answer;});}writing(){//模板文件路径consttmpl=this.templatePath("foo.txt");//输出文件路径constoutput=this.destinationPath("input.txt");////模板数据下面//constcontext={title:"hello",success:true};this.fs.copyTpl(tmpl,output,this.answer);}};plop(创建特定类型的文件)基本都是把plop模块作为一个项目开发依赖安装在项目根目录下创建一个plopfile.js文件在plopfile.js文件中定义一个脚手架任务编写生成特定类型文件的模板file通过plop提供的cli运行脚手架任务安装plop扩展模块yarnaddplop--dev在项目根目录下创建plopfile.js入口文件//plop入口文件，需要导出一个函数//这个函数接收到一个plop对象，用户创建一个生成器任务name",message:"componentname",default:"myComponent",},],actions:[{type:"add",path:"src/components/{{name}}/index.js",templateFile:"templates/component.js.hbs",},{type:"add",path:"src/components/{{name}}/index.css",templateFile:"templates/component.css.hbs",},{type:"add",path:"src/components/{{name}}/index.html",tetemplateFile:"templates/component.html.hbs",},],});};编写模板component.html.hbsconsole.log("{{name}}")运行yarnplop组件生成特定类型文件脚手架工具原理通过命令行交互向用户提问根据用户回答生成文件入口配置NodeCLI的是package.json文件中的bin，应用入口文件必须有这样一个文件头如果是linux或者macOS系统，需要修改这个文件的读写权限为755#!/usr/bin/env节点文件配置#!/usr/bin/envnodeconsole.log("start......");constinquirer=require("inquirer");constfs=require("fs");constpath=require("path");constejs=require("ejs");inquirer.prompt([{type:"input",name:"name",message:"projectname",},]).then((answer)=>{console.log(answer);//模板目录consttmplDir=path.join(__dirname,"templates");//目标目录constdestDir=process.cwd();//将模板下的所有文件转换到目标目录fs.readdir(tmplDir,(err,files)=>{if(err)throwerr;files.forEach((file)=>{//通过模板引擎渲染文件ejs.renderFile(path.join(tmplDir,file),answer,(err,result)=>{if(err)throwerr;//将结果写入目标文件路径fs.writeFileSync(path.join(destDir,file),result);});});});});
