阅读 1166

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

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,看下效果:

image.png 选择手动

image.png 选择Y,生成并写入如下文件

image.png 效果:

image.png

image.png

image.png

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

番外

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

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

文章分类
前端
文章标签