脚手架工具Yeoman

最新推荐文章于 2024-05-05 00:20:36 发布

山原旷其盈视

最新推荐文章于 2024-05-05 00:20:36 发布

阅读量596

点赞数 1

分类专栏：前端工程化文章标签：前端 javascript

本文链接：https://blog.csdn.net/weixin_46045382/article/details/126739121

版权

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

1 篇文章 0 订阅

订阅专栏

在建筑行业来说脚手架是为了保证各施工过程顺利进行而搭设的工作平台，如下图：

举一反三前端脚手架也是一个工作平台，它帮你搭建好了一个前端项目的基础结构代码，你只需要在结构里面根据项目需求添砖加瓦或者优化结构，进而完成一个前端项目。

前端脚手架可以分为专用脚手架例如：vue-cli、create-react-app、angular-cli等；通用脚手架，例如：yeoman、plop等。下面详细介绍一下yeoman脚手架，参考文档。

Yeoman的基本介绍

Yeoman可以构建任何语言的项目 (Web, Java, Python, C#, 等。)；
yo是Yeoman命令行管理工具；
可以安装不同的generators来生成不同的脚手架。

使用Yeaman生成webapp脚手架

全局安装yo
```
npm install -g yo
```
安装generator
```
npm install -g generator-webapp
```
进入项目文件夹，运行已经下载好的generator
```
yo webapp
```
启动应用
```
npm run start
```

构建自己的脚手架工具

新建项目文件，文件目录结构如下：generator-xxx(xxx是自定义的脚手架名称)

实际上脚手架的生成控制是继承于yeoman-generator，在app/index.js中代码如下：

prompting函数是与用户在命令行中交互的一些代码，例如使用vue-cli时在命令行中会询问用户项目名称是什么。

writing函数是对脚手架结构的写操作。

const Generator = require("yeoman-generator")

module.exports = class extends Generator{
    prompting(){
        return this.prompt([
            {
                type: "input",
                name: "title",
                message: "you project name",
                default: this.appname
            }
        ]).then(answers => {
            console.log("answers",answers);
            this.answers = answers
        })
    }
    writing(){
        const tel = this.templatePath('index.html')
        const tell = this.destinationPath('index.html')
        // 把模板拷贝成 (模板在哪，输出到脚手架的哪里，把脚手架中内容替换成什么)
        this.fs.copyTpl(tel, tell, this.answers)
    }
}

templates/index.html模板代码，<%= title %>使用的是EJS模板语法，title的值是在命令行交互时用户输入获得。

<!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">
    <!-- yeoman中可以使用EJS的模板语法创建文件-->
    <title><%= title %></title>
</head>
<body>
    <div>
        <h1>xinru1</h1>
    </div>
</body>
</html>