前端黑科技篇章之plop，让你也拥有自己的脚手架

点击上方 前端瓶子君，关注公众号

回复算法，加入前端编程面试算法每日一题群

来源：大码猴

https://juejin.cn/post/6953981951569051685

plop 是一款代码模板生成工具，配置好后只需在终端上敲上命令，就可以根据你自己定义好的模板文件去生成对应的文件，接下来我们看下面实现。

项目安装plop

在项目中安装依赖

npm i plop -D
复制代码

在package.json配置启动命令

image.png

plop配置文件（存放在项目根目录）

image.png

demoFile.js的注释已经写的很清楚啦

const FILE_PATH = 'demo'

module.exports = {
  description: '创建文件，注意必须符合项目约束规范', // 命令启动描述
  prompts: [
    {
      type: 'input', // 命令方式，input-输入，list-选择，confirm-是否
      name: 'fileName', // 输入的文件名
      message: '请输入文件名称' // 提示信息
    }
  ],
  actions: data => {
    const { fileName } = data // 拿到终端输入的文件名
    const actions = []
    if (fileName) {
      actions.push({ // 添加新的模板文件 add
        type: 'add',
        path: `${FILE_PATH}/{{ fileName }}.js`, // 生成的文件存放路径
        templateFile: '.setting/template/demoFile.hbs', // 模板文件路径
        data: { // 传递的数据给模板文件
          name: fileName,
        }
      })

      actions.push( // 再已有的文件中append 模板内容
        {
          type: 'append',
          path: `${FILE_PATH}/index.js`,
          pattern: /[\\s\\S]*?/, // 插入内容的匹配规则
          templateFile: '.setting/template/require.hbs', // 模板文件路径
          data: { // 需要告诉模板的参数值
            name: fileName
          }
        }
      )
    }
    return actions
  }
}

复制代码

模板文件的定义

根据配置的文件创建两个模板文件

image.png

生成模板的文件，直接拿传过来的变量名即可获取值

image.png

插入的模板文件

image.png

运行效果

现在就让我们试试它的神奇之处

生成文件前的目录

image.png

生成文件前的index文件

image.png

打开项目根目录的终端，输入npm run new，出现如下结果

image.png

接下来我们输入text，回车，得到如下结果

image.png

第一个为生成的文件，第二个为插入内容之后的文件，现在来让我们看看操作之后的目录

生成文件的内容，和我们模板定义的一毛一样

image.png

插入在index.js内容上边

image.png

是不是很实用，配置完之后我们就不用创建文件=>引用=>写路由那么多步骤啦，直接一个命令搞定，接下来带大家看实战配置哦。

实战例子

我把plop拆为三个生成模块，如下图：

image.png

配置如下：

image.png

API配置

image.png

component配置

image.png

image.png

page配置

image.png

image.png

来看看我们的模板（可以看头上的文件名）

image.png

image.png

image.png

image.png

image.png

敲 npm run new，接下来见证奇迹的时候

image.png

先选择page，看下效果：

选择手动

选择Y，生成并写入如下文件

效果：

image.png

image.png

image.png

其他两个都是差不多的就不展示啦，是不是很神奇，配置好的话，能让我们的开发不再繁琐。如果你觉得这篇文章对你有帮助的话，请你移动下手指帮我点个赞哦！

番外

下面是本篇章前端黑科技工具篇哦，大大提高了前端开发效率呢。

1.前端黑科技篇章之scp2，让你一键打包部署服务器

最后

欢迎关注【前端瓶子君】✿✿ヽ(°▽°)ノ✿

回复「算法」，加入前端编程源码算法群，每日一道面试题（工作日），第二天瓶子君都会很认真的解答哟！

回复「交流」，吹吹水、聊聊技术、吐吐槽！

回复「阅读」，每日刷刷高质量好文！

如果这篇文章对你有帮助，「在看」是最大的支持

》》面试官也在看的算法资料《《

“在看和转发”就是最大的支持