学习笔记：脚手架工具Yeoman 是一种高效、开源的 Web 应用脚手架搭建系统，意在精简开发过程。Yeoman 因其专

目前前端常用的特定的脚手架工具有:

create-react-app
vue-cli
angular-cli

还有一种通用的，灵活性比较高的脚手架工具，比如Yeoman

Yeoman

Yeoman 是一种高效、开源的 Web 应用脚手架搭建系统，意在精简开发过程。Yeoman 因其专注于提供脚手架功能而声誉鹊起，它支持使用各种不同的工具和接口协同优化项目的生成。

全局安装Yeoman中的yo模块

yarn add yo global

全局安装对应的generator

yarn add generator-node global

通过yo运行generator

cd myproject
mkdir my-module
yo node

然后会提示一系列关于项目的配置信息，跟着步骤一步步填写好，最后就生成好项目。

有时我们想在已有的项目中创建特定的项目文件，比如添加.readme，或者eslint、babel等的配置文件，这些配置文件都有特定的代码，如果自己手动去写很有可能会出错，我们可以通过生成器自动的帮我们生成，这样就提高了开发效率。可以通过Yeoman提供的Sub Generator来实现。

yo node:cli

Plop

一款小而美的脚手架工具。主要是为了创建项目中特定的文件，类似Yeoman中的Sub Generator，不过它有点像项目的依赖，被集成到项目中方便创建同类型的文件。

基本使用

先创建一个基础的react项目。

安装plop依赖

yarn add plop -D

在项目根目录下创建一个plop-templates/components.hbs。.hbs文件就是我们需要生成的模板文件，通过handle bus模板引擎去创建项目文件

import React from 'react',
export default function {{name}}(){
    return {
        <div className='{{name}}'>
            <h1>{{name}} component</h1>
        </div>
    }
}

在项目根路径下创建一个plopfile.js，Plop的入口文件，需要导出一个函数，此函数需要接收一个plop对象，用于创建生成器任务。

modules.exports = plop => {
    plop.setGenerator ('Generator', {
        description: 'create a component',
        prompts: [
            {
                type: 'input',
                name: 'name',
                message: 'component name',
                default: 'MyComponent',
            }
        ],
        actions: [
            {
                type: 'add', // 代表添加文件
                path: 'src/components/{{name}}/{{name}}.js', // name指向prompts中的name
                templateFile: 'plop-templates/component.hbs',
            }
        ]
    })
}

使用Plop提供的CLI运行我们定义的component生成器，我们定义的模板就会在src对应的目录下生成。

yarn plop component

如果要生成多个模板文件，就添加多个actions，type的值可在官网查看。

总结：

将plop模块作为项目开发依赖安装；
在项目根目录下创建一个plopfile.js文件；
在plopfile.js文件中定义脚手架任务；
编写用于生成特定类型文件的模版；
通过Plop提供的CLI运行脚手架任务；

脚手架工作原理

启动脚手架工具，询问预设问题，生成项目模板文件。

通过nodejs开发一个小型的脚手架工具。

yarn init // 初始化package.json

在package.json文件中添加bin指令

{
    "scripts": {
        ...,
        "bin": "cli.js", //指定cli的入口文件
    }
}

在根目录下添加templates文件夹，里面放入我们想要生成的模板文件。比如：templates/index.html和index.css

// index.html
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title><%= name %></title>
    </head>
    <body>
        
    </body>
</html>

在根路径下添加cli.js文件

// cli.js
#!/usr/bin/env node
// node cli应用入口文件必须要有如上的文件头
// 工作过程
// 通过命令行交互询问用户问题，需要安装inquirer,prompt用于发起一个命令行询问
const inquirer = require("inquirer");
// 拼接路径
const path = require("path");
// 文件的写入与读取
const fs = require("fs");
// EJS模板引擎
const ejs = requre("ejs");
inquirer.prompt([
    {
        type: 'input', // 问题询问的方式
        name: 'name',
        message: 'project name',
    }
]).then(answers=>{
    // answers为用户回复的答案,根据用户的回复生成文件
    // 模板目录
    const tmpDir = path.join(__dirname, 'templates');
    // 目标目录
    const destDir = process.cwd();
    // 将模板下的文件全部转移到目标目录下
    fs.readdir(tmpDir, (err, files)=>{
        if(err) throw err;
        files.forEach(file=>{
            // 通过EJS模板引擎渲染模板
            ejs.renderFile(path.join(tmpDir, file), answers, (err, result)=>{
                if(err) throw err;
                // 将结果写入目标目录文件路径
                fs.writeFileSync(path.join(destDir, file), result);
            })
        })
    })
    
})