本文详细介绍了如何使用Yeoman和Plop创建自定义项目脚手架。从安装Yeoman和相关生成器，到创建模板文件，接收用户输入并利用模板引擎动态生成文件，再到发布自定义Generator。此外，还简要提及了Plop的基本用法，用于快速生成特定类型的文件。通过这些工具，开发者可以高效地搭建和维护项目结构。
yeoman 基础使用
通用项目脚手架工具
1、安装
yarn global add yo
// 项目生成器
yarn global add generator-node
2、创建my-module文件夹
运行生成器
yo node
3、创建cli
运行
yo node:cli
yarn link
// 安装模块
yarn
yeomen 使用步骤
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vsslm1ne-1649676358887)(脚手架工具/image-20220327193658762.png)]
创建网页应用
1、 安装webapp generator
yarn global add generator-webapp
2、 运行generator
yo webapp
创建自定义的Generator
基于Yeoman搭建自己的脚手架
Generator 本质上就是一个npm模块
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vEwgZFrx-1649676358892)(脚手架工具/image-20220327194759616.png)]
如果需要多个生成器可以添加新的生成器目录
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JxBJMSRU-1649676358894)(脚手架工具/image-20220329201831818.png)]
Yeoman Generator名称格式必须是generator-
- 创建文件夹（generator-sample）
- yarn init
- yarn add yeoman-generator
- 在generator-sample目录中创建generators\app\index.js文件
- 在index.js文件中编写具体代码
// 此文件最为Generarot的核心入口
// 需要导出一个继承自 Yeoman Generator 的类型
// Yeoman Generator 在工作时会自动调用我们在此类型中定义的一些生命周期方法
// 我们在这些方法中可以通过调用父类提供的一些工具方法实现一些功能，例如文件按写入
const Generator = require('yeoman-generator')
module.exports = class extends Generator{
writing(){
// yeoman 自动在生成文件阶段调用此方法
// 我们这里尝试往项目目录中写入文件
this.fs.write( // fs不是node中的fs,这里的fs模块是一个高度集中的fs模块更强大
this.destinationPath('temp.txt'),// 自动获取生路径成一个项目目录下的文件
Math.random().toString()// 写入内容-随机数
)
}
}
- npm link(yarn link)
- 创建一个文件夹，在文件夹下执行 yo sample
根据模板创建文件
1、 在文件夹app下创建templates文件夹
2、 templates文件夹下的文件都是模板文件（例如foo.txt内容如下）
这是一个模板文件
内部可以使用 EJS（模板引擎） 模板标记输出数据
例如：<%= title %>
其他 ejs 语法也支持
<% if(success) { %>
哈哈哈
<% }%>
3、 不用再通过write方法去写入文件（修改index.js文件）
// 此文件最为Generarot的核心入口
// 需要导出一个继承自 Yeoman Generator 的类型
// Yeoman Generator 在工作时会自动调用我们在此类型中定义的一些生命周期方法
// 我们在这些方法中可以通过调用父类提供的一些工具方法实现一些功能，例如文件按写入
const Generator = require('yeoman-generator')
module.exports = class extends Generator{
writing(){
// yeoman 自动在生成文件阶段调用此方法
// 我们这里尝试往项目目录中写入文件
// this.fs.write( // fs不是node中的fs,这里的fs模块是一个高度集中的fs模块更强大
// this.destinationPath('temp.txt'),// 自动获取生路径成一个项目目录下的文件
// Math.random().toString()// 写入内容-随机数
// )
// 通过模板方式写入文件到目标目录
// 模板文件路径
const tmpl = this.templatePath('foo.txt')
// 输出目标路径
const output = this.destinationPath('foo.txt')
// 模板数据上下文
const context = {title:'Hello zc',success:false}
// copyTpl将模板文件映射到输出路径上
this.fs.copyTpl(templ,output,context)
}
}
4、执行yo sample
接收用户输入
修改index.js文件
// 此文件最为Generarot的核心入口
// 需要导出一个继承自 Yeoman Generator 的类型
// Yeoman Generator 在工作时会自动调用我们在此类型中定义的一些生命周期方法
// 我们在这些方法中可以通过调用父类提供的一些工具方法实现一些功能，例如文件按写入
const Generator = require('yeoman-generator')
module.exports = class extends Generator{
promptin(){
// 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( // fs不是node中的fs,这里的fs模块是一个高度集中的fs模块更强大
// this.destinationPath('temp.txt'),// 自动获取生路径成一个项目目录下的文件
// Math.random().toString()// 写入内容-随机数
// )
// 通过模板方式写入文件到目标目录
// 模板文件路径
const tmpl = this.templatePath('foo.html')
// 输出目标路径
const output = this.destinationPath('foo.html')
// 模板数据上下文
let {name,success = false} = this.answers
const context = {'name':name,'success':success}
// copyTpl将模板文件映射到输出路径上
this.fs.copyTpl(tmpl,output,context)
}
}
Vue Generator案列
1、 创建generator-zc-vue文件夹
2、yarn init
3、yarn add yeomen-generator
4、 新建generators/app/index.js文件
// index.js文件内容
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,
}
]).then(answers=>{
this.answers = answers
})
}
// 创建模板
writing(){
}
}
5、创建模板
6、在模板文件中输出模板标记 多加一个%号
<link rel="icon" href="<%%= BASE_URL %>favicon.ico">
7、。。。。。。
发布Generator
发布Generator就是发布一个npm的模块
npm 发布命令行 npm public
1、 将项目托管到一个公开的源代码仓库
2、创建.gitignore文件命令行echo node_modules > .gitignore
3、
Plop简介
一个小而美的脚手架工具
plop的基本使用
1、 安装plop yarn add plop --dev
2、创建入口文件 plopfile.js
// Plop 入口文件，需要导出一个函数
// 此函数接收一个 plop 对象，用于创建生成器任务
module.exports = plop => {
plop.setGenerator('component001', {
description: 'create a component',
prompts: [
{
type: 'input',
name: 'name',
message: 'component name',
default: 'MyComponent'
}
],
actions: [
{
type: 'add', // 代表添加文件
path: 'src/components/{{name}}/{{name}}.js',
templateFile: 'plop-templates/component.hbs'
},
{
type: 'add', // 代表添加文件
path: 'src/components/{{name}}/{{name}}.css',
templateFile: 'plop-templates/component.css.hbs'
},
{
type: 'add', // 代表添加文件
path: 'src/components/{{name}}/{{name}}.test.js',
templateFile: 'plop-templates/component.test.hbs'
}
]
})
}
3、创建模板文件plop-templates/components.test.hbs
4、执行 yarn plop component001
脚手架的工作原理
用node.js创建一个脚手架
1、创建项目目录
2、yarn init在package.json文件中添加bin:"cli.js"用于指定项目的入口文件
3、创建cli.js文件，yarn link将模块link到全局
#!/usr/bin/env node
// Node CLI 应用入口文件必须要有这样的文件头
// 如果是 Linux 或者 macOS 系统下还需要修改此文件的读写权限为 755
// 具体就是通过 chmod 755 cli.js 实现修改
// 脚手架的工作过程：
// 1. 通过命令行交互询问用户问题
// 2. 根据用户回答的结果生成文件
const fs = require('fs')
const path = require('path')
const inquirer = require('inquirer')
const ejs = require('ejs')
inquirer.prompt([
{
type: 'input',
name: 'name',
message: 'Project name?'
}
])
.then(anwsers => {
// console.log(anwsers)
// 根据用户回答的结果生成文件
// 模板目录
const tmplDir = path.join(__dirname, 'templates')
// 目标目录
const destDir = process.cwd()
// 将模板下的文件全部转换到目标目录
fs.readdir(tmplDir, (err, files) => {
if (err) throw err
files.forEach(file => {
// 通过模板引擎渲染文件
ejs.renderFile(path.join(tmplDir, file), anwsers, (err, result) => {
if (err) throw err
// 将结果写入目标文件路径
fs.writeFileSync(path.join(destDir, file), result)
})
})
})
})
4、 发布命令行交互询问安装yarn add inquirer 在cli.,js中载入
5、 创建模板文件templates/index.html
6、 安装一个模板引擎yarn add ejs引入模板引擎
6、执行项目名称
板引擎渲染文件
ejs.renderFile(path.join(tmplDir, file), anwsers, (err, result) => {
if (err) throw err
// 将结果写入目标文件路径
fs.writeFileSync(path.join(destDir, file), result)
})
})
})
})
4、 发布命令行交互询问安装`yarn add inquirer` 在cli.,js中载入
5、 创建模板文件`templates/index.html`
6、 安装一个模板引擎`yarn add ejs`引入模板引擎
6、执行`项目名称`
585
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
