脚手架工具Yeoman

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

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

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

Yeoman的基本介绍

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

使用Yeaman生成webapp脚手架

1. 全局安装yo

   npm install -g yo
   

2. 安装generator

   npm install -g generator-webapp

3. 进入项目文件夹，运行已经下载好的generator

   yo webapp

4. 启动应用

   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的值是在命令行交互时用户输入获得。

    
    
    
    
    


    

        
xinru1
    

• 在终端打开当前项目，执行npm link把当前目录挂载到全局命令行中，目的是使全局能够搜索到当前脚手架命令。
• 新建项目文件夹，在此文件夹中运行下面命令，即可生成我们刚才构建的脚手架工具

yo xinruvue

更多的api使用可以去官网查阅，一个工具的使用没有难度，难度在于怎么设计，我们可以考虑使用Yeoman生成项目中比较固定的模板。