Plop的使用 &自定义简易脚手架

此处可以查看 官方文档

Plop应用场景

在react项目中，以我日常开发为例：正常新建一个组件的话需要建立两个基础文件，js和less两个文件，其中js和less文件中的有基本的通用性代码，手动新建和书写相同的代码这种属于重复性工作，我们可以借助Plop工具，通过命令行的方式来一步创建。

Plop使用

以react项目为例

安装

yarn add plop -D

新建配置文件

在项目根目录下新建plopfile.js配置文件，书写plop的配置项

plopfile.js 文件配置项的书写

module.exports = plop => {
    // 创建一个plop生成器，第一个参数就是命令的key，后面的使用方式就是 yarn plop component。 第二个参数是对象，为生成器的配置项
    plop.setGenerator('component', {
        description: '创建一个组件',
        // prompts 就是命令行窗口和开发者交互的内容
        prompts: [
            {
                type: 'input', // 开发者通过输入内容的方式进行交互
                name: 'componentName', // 用于获取用户输入内容的key
                message: '请输入组件名', // 命令行窗口中询问开发者的语句
                default: 'MyComponent' // componentName对应的默认值
            }
        ],
        // actions开发者在命令行窗口完成交互后，程序最终要做的事情。数组中有几项，那么程序就会做几件事情
        actions: [
            {
                type: 'add', // 程序要新增文件
                path: 'src/components/{{componentName}}/{{componentName}}.js', // 新增的文件的目标路径
                templateFile: "plop-templates/component.hbs" // 新增文件中的内容要来自此处指定的模板内容
            },
            {
                type: 'add', // 程序要新增文件
                path: 'src/components/{{componentName}}/{{componentName}}.scss', // 新增的文件的目标路径
                templateFile: "plop-templates/component.css.hbs" // 新增文件中的内容要来自此处指定的模板内容
            },
        ]
    })
}

新建模板文件

在根目录下新建plop-templates文件夹，用于存放js与css的模板文件，该模板文件就是plopfile.js 配置文件中用到的模板

js模板文件内容
使用插值表达式通过输入内容的key来获取开发者输入的内容

import React from "react";
import "./{{componentName}}.less";
// {{componentName}}  插值表达式的写法
const {{componentName}} = (props) => {

    return (
        <div className="{{componentName}}">
            {{componentName}} 组件
        </div>
    )
}

export default {{componentName}};

less模板文件内容

 // {{componentName}}  插值表达式获取用户输入的内容
.{{componentName}} {
    width: 100%
    height: 100%
}

执行命令

yarn plop component

自定义脚手架

脚手架工作流程

原理是利用node提供的api来对使用者进行询问，根据询问得到的结果去生成对应的文件。

案例

#!/usr/bin/env node   // 显式的声明这个文件用node来执行

const path = require("path");
const inquirer = require("inquirer"); // inquirer模块是用来通过命令行和开发者交互的
const fs = require("fs") // fs 是文件读写模块
const ejs = require("ejs") // ejs是模板引擎模块

inquirer.prompt([
    {
        type: 'input', // 交互类型---让开发者通过输入的方式进行交互
        name: 'projectName', // 获取开发者输入内容的key
        message: '请输入项目名称' // 询问开发者的语句
    }
]).then(answer=>{
    // answer 是开发者的回答结果
    // 回答结果来生成文件，生成文件必须要知道目标路径

    const tmplDir = path.join(__dirname,'templates')  // 模板的目录

    // 目标路径一般是输入命令行时所在的目录
    const destDir = process.cwd();

    // 通过fs模块读取模板文件夹下面的文件
    fs.readdir(tmplDir,(err,files)=>{
        if (err) throw err
        files.forEach(item=>{
            console.log(item)
            // 通过模板引擎去渲染文件，第一个参数是生成文件的路径，第二个参数是询问得到的结果，第三个回调生成文件
             ejs.renderFile(path.join(tmplDir,item),answer,(err,result)=>{
                 if (err) throw err;
                 console.log(result)
                 fs.writeFileSync(path.join(destDir,item),result)
             })
        })
    })
})

文章内容输出来源：拉勾教育大前端高薪训练营