一：脚手架的本质作用
- 创建项目的基础结构，根据项目规范和约定
- 相同的组织结构
- 相同的开发范式
- 相同的模块依赖
- 相同的根据配置
- 相同的基础代码
二：常用的脚手架工具
- react-------create-react-app
- vue---------vue-cli
- angular----angular-cli
- yeoman----通用性，扩展性较强
- polp--------可以用来创建特定的类型文件
三：Yeoman简介
- 用于创建现代化开发的web脚手架工具
- 可以提供yeoman搭建不同的generator创建任何类型的项目
四：Yeoman基础使用
- 首先需要安装node---而且版本不能太高
- 在全局安装yo-----yarn add yo --global
- 安装对应的generator-----yarn add generator-node --global(这里安装generator的node模块)
- 提供yo运行generator(yo node)
五：Sub-Generator
- 有时候不需要创建完整的项目结构,在已有的项目基础上创建特定得到文件,可以通过sub-Generator的子集去实现(但是并不是所有的Generator都有子集)
- yo node:cli（上一节安装的node模块,cli是node模块的子集）,在生成的答案询问是否重写的时候选是
- 将此模块link到全局----yarn link
- 安装依赖---yarn
- 运行模块：文件名 --help
六：Yeoman使用步骤总结
- 明确你的需求
- 找到合适的Generator
- 全局范围安装Generator
- 通过yo运行对应的Generator
- 通过命令行交互填写选项
- 生成你所需要的项目结构
七：自定义Generator
- 基于Yeoman搭建自己的脚手架
- 基本目录结构generators和package.json
- 在generators中创建一个app文件夹
- app文件夹里面创建一个index.js文件，作为生成器入口文件
- 而且generator模块的名称是一个==generator-==的形式
- 所以最外层的文件夹名称为generator-你起的名称
八：创建generator模块
- 创建一个名为generator-sample的文件夹,打开cmd进入的此文件
- 初始化一个package.json文件（yarn init --yes）
- 安装yeoman的generator模块,提供生成器的一个基类,基类提供了一些工具函数（yarn add yeoman-generator）
- 在此文件夹中创建一个generators的文件夹,在generators文件中创建一个app文件夹,在app文件夹中创建一个index.js文件,index.js作为Generator的核心文件入口,需要导出一个基础Yeoman Generator的类型,Yeoman Generator在工作的时候会自动调用我们在此类型中定义的一些生命周期方法,我们在这些方法中调用父类提供的一些工具方法实现一些功能,例如写入文件。
- 写完后将模块连接到全局，使其成为一个全局的模块包（yarn link）
- 然后再其他问价夹就可以通过（yo + 生成器名称（例如此文件夹名称为generators-sample）则--yo sample）生成模块
const Generator = require('teoman-generator')
//导出一个类型，让这个类型基础Generator
module.exports = class extends Generator {
//这是Generator的函数
writing() {
//Yeoman 自动生成文件阶段调用此方法
//我们在这里尝试往项目目录写入文件
//这是父类中的fs模块
this.fs.write(
//写入的文件
this.destinationPath('temp.txt')
//写入的内容
this.random().toString()
)
}
}
九：根据模板创建文件
- 创建的文件有很多，而且文件的内容也相对复杂，那就可以使用模板
- 相对于手动创建每一个文件，模板的方式大大提高了效率
- 之前的步骤和创建Generator一样
- 不同的是在app目录下再创建一个templates文件夹,将要生成的文件(模板)放在里面
- 通过yo + generator文件名执行(因为文件为generator-sample，所以yo sample)
const Generator = require('yeoman-generator')
module.exports = class extends Generator {
writing(){
//获取模板文件路径
const tmpl = this.templatePath('foo.txt')
//创建输出文件路径
const output = this.destinationPath(foo.txt)
//模板数据上下文
const context = { title: 'xjq', success: false}
this.fs.copyTpl(tmpl, output, context)
}
}
十：接收用户输入
- 可以实现Generator类型当中的prompying方法
const Generator = require('yeoman-generator')
module.exprots = class extends Generator {
//这是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(){
//模板文件路径
const tmpl = this.templatePath('bar.html')
//输出目标路径
const output = this.destinationPath('bar.html')
//模板上下文
const context = this.answers
this.fs.copyTpl(tmpl, output, context)
}
}
十一：Vue-Generator案例
- 步骤
- yarn init --yes 初始化一个package.json文件
- yarn add yeoman-generator模块
- 创建一个generators文件夹里面包含app文件夹,app里面包含index.js主入口文件
- 在index文件中引入yeoman-generator再导出
- 创建templates目录文件夹，将要创建的文件放入这里面
- 配置index,js入口文件
- 配置完index.js文件后将此模块link到全局（yarn link）
- 通过yo + 模块名创建(yo xjq)
const Generator = require('yeoman-generator')
module.exports = class extends Generator{
prompting(){
return this.prompt([
{
type:'input',
name:'name',
message:'Your project name',
default:this.appname //appname 为项目生成目录名称
}
]).then(answers => {
this.answers = answers
})
}
writing(){
//把每一个文件都通过模板转换到目标路径
const templates = [
'.gitignore',
'babel.config.js',
'package.json',
'package-lock.json',
'README.md',
'src/App.vue',
'src/main.js',
'src/router/index.js',
'src/store/index.js'
]
templates.forEach(item => {
this.fs.copyTpl(
this.templatePath(item),
this.destinationPath(item),
this.answers
)
})
}
}
十二：Plop简介
- 一个小而美的脚手架工具
- 主要应用于项目中创建特定文件类型的小工具
十三：Plop的基本使用
- 在项目中安装到开发依赖（yarn add plop --dev）
- 再项目的根目录新建一个plopfile.js文件
-
plop入口文件,需要导出一个函数
-
此函数需要接收一个plop对象,用于创建生成器任务
-
在根目录创建模板文件(plop-templates，在里面再新建一个component.hbs用于创建模板)
-
运行---yarn plop+生成器名称
modele.exports = plop => { //第一个参数为生成器的名称 //第二个参数为生成器的配置选项 plop.setGenerator('component', { description: '描述', prompts:[ { type:'input', name:'name', message:'component name', default:'MyComponent' }, //动作 actions:[ { type:'add',//代表添加文件 path:'src//components/{{name}}/{{name}}.js',//代表创建目录 templateFile:'plop-templates/component.hbs'//模板路径 } ] ] }) }
