通过yeoman搭建自己的脚手架工具

最新推荐文章于 2024-09-24 08:07:17 发布

问也去

最新推荐文章于 2024-09-24 08:07:17 发布

阅读量610

点赞数 1

分类专栏：前端工程化文章标签： node.js 前端前端工程化

本文链接：https://blog.csdn.net/wenyeqv/article/details/123135155

版权

前端工程化专栏收录该内容

10 篇文章 0 订阅

订阅专栏

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
            )
        })
    }
}