yeoman使用
- 安装：
yarn global add yo
yeoman是一个脚手架工具，通过它可以创建相关类型的项目，如：创建一个node项目：
- 安装相关node项目对应的generator:
yarn global add generator-node - 运行：
yo node即可创建一个项目
搭建脚手架
- 创建一个脚手架模板目录：generator-sample
- 初始化：
yarn init - 安装模块基类：
yarn add yeoman-generator - 创建入口文件
- 在该目录下新建 app -> index.js
- 该文件为generator的核心入口
- 文件中需要导出一个继承yeoman generator的类
- yeoman generator在工作时会自动调用我们在该文件中声明的生命周期方法
- 声明的方法可以通过父类提供的一些工具来实现某些功能
const Generator = require("yeoman-generator")
module.exports = class extends Generator{
//yeoman会在生成文件阶段调用这些方法
write(){
//尝试往项目中写入文件
this.fs.write(
this.destinationPath("temp.txt"),
Math.random().toString()
)
}
}
- 关联到全局：
yarn link - 在新的文件夹下运行：
yo sample即可生成脚手架文件 - 通过模板渲染方式生成文件
- index同级目录下创建templates文件夹，在里面创建模板文件：foo.html
- 模板创建遵循EJS模板标记规范
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1><%=title %></h1>
<span><%= sx%></span>
</body>
</html>
-
index.js中编辑
const Generator = require("yeoman-generator")
module.exports = class extends Generator{
//yeoman会在生成文件阶段调用这些方法
write(){
// //尝试往项目中写入文件
// this.fs.write(
// this.destinationPath("temp.txt"),
// Math.random().toString()
// )
//获取当前模板文件路径
const tml = this.templatePath('foo.html')
//输出路径
const output = this.deleteDestination('newfoo.html')
const context = {
title:'模板',
sx:'大家好'
}
this.fs.copyTpl(tml,output,context)
}
}
这样就可以将模板文件，用规定的内容渲染到指定的地方
- 接收用户输入
const Generator = require("yeoman-generator")
module.exports = class extends Generator{
//yeoman会在生成文件阶段调用这些方法
prompting(){
//使用父类的prompt方法接收
return this.prompt([
{
type:'input',
name:'title',
message:'your name',
default:this.appname
},{
type:'input',
name:'sx',
message:'your sign',
default:'sx'
}
]).then(ans=>{
//将接收的结果挂在到全局
this.ans = ans
})
}
write(){
//获取当前模板文件路径
const tml = this.templatePath('foo.html')
//输出路径
const output = this.destinationPath('newfoo.html')
//使用全局接收对象
const context = this.ans
this.fs.copyTpl(tml,output,context)
}
}
prompting方法中可定义要用户输入的指令，通过then方法将接收到的用户输入绑定到全局，在writing方法中作为渲染内容，渲染模板
实战：创建一个jquery+bootstrap的脚手架小项目
- 重新创建一个脚手架模板：generator-myjquery
- 在templates文件夹中使用yarn命令初始化并安装jquery模块和bootstrap模块
- 删除node_modules
- package.json中项目名可设置为模板： “name”: “<%= title%>”,
- index.html的title标签同理
- 在index编辑内容：
const Generator = require("yeoman-generator")
module.exports = class extends Generator{
prompting(){
return this.prompt([
{
type:'input',
name:'title',
message:'please input a title',
default:this.appname
}
]).then(ans=>{
this.ans = ans
})
}
writing(){
//将tenplate中的文件收集依次渲染
const tempaltes = [
'public/index.css',
'public/index.js',
'index.html',
'package.json',
'yarn.lock'
]
tempaltes.forEach(item=>{
this.fs.copyTpl(
this.templatePath(item),
this.destinationPath(item),
this.ans
)
})
}
}
创建文件夹运行 yo myjquery即可生成改模板，运行yarn install即可安装所需依赖