安装

plop 可以选择安装在全局也可以安装在项目中，这里采用安装在项目中

pnpm i plop -D
复制代码

安装完成之后，在 package.json 的 script 中添加运行命令，由于我们并不是在根目录下创建 plopfile.js 文件，所以需要重新指定文件路径。

"p": "plop --plopfile ./plop/generator/create-module.js"
复制代码

配置模版

假设，我们目前的目录结构如下

1649315453(1).png

采用多页的形式，每个页面都有 html、javaScript、css 三个类型的文件，并且都有一些默认的内容

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Test</title>
  </head>
  <body>
    <div class="test">
      test.html
    </div>
  </body>
</html>

复制代码

javaScript

import './test.less'

复制代码

less

@import '@/assets/fonts/iconfont.css';

复制代码

接下来就需要配置 plop 来帮我们创建基础模版了

首先在根目录下创建 plop 目录，用于放置我们的模版配置代码，在 plop 下创建 generator 和 template 目录， generator 用于放置 plop 生成文件模版代码， template 用于放置模版代码。

接下来在 generator 下创建 create-module.js 文件，并新增以下代码

// 首字母转大写
const toUpperCase = (str) => str.charAt(0).toUpperCase() + str.slice(1)

module.exports = function (plop) {
  plop.setGenerator('createModule', {
    // 提示
    description: '创建一个模块',
    // 选项步骤
    prompts: [
      {
        type: 'input',
        name: 'moduleName',
        message: '请输入模块名称'
      }
    ],
    actions: function (data) {
      // data 可以拿到所有 prompts 中的 name 字段，也就是所有步骤所输入或选择的参数
      const { moduleName } = data

      // 首字母大写
      const upperFirstName = toUpperCase(moduleName)

      const actions = []

      if (moduleName) {
        actions.push(
          {
            // 类型新增
            type: 'add',
            // 存放路径
            path: `../../src/views/${moduleName}/${moduleName}.html`,
            // 使用哪个模版
            templateFile: '../template/create-module-html.hbs',
            // 可以传递参数
            data: {
              moduleName,
              upperFirstName
            }
          },
          {
            // 类型新增
            type: 'add',
            // 存放路径
            path: `../../src/views/${moduleName}/${moduleName}.js`,
            // 使用哪个模版
            templateFile: '../template/create-module-js.hbs',
            // 可以传递参数
            data: {
              moduleName
            }
          },
          {
            // 类型新增
            type: 'add',
            // 存放路径
            path: `../../src/views/${moduleName}/${moduleName}.less`,
            // 使用哪个模版
            templateFile: '../template/create-module-less.hbs'
          }
        )
      }
      return actions
    }
  })
}

复制代码

创建好执行代码之后，我们需要创建模版代码，所以在 plop 中新增 template 目录，并创建 create-module-html.hbs、 create-module-js.hbs、 create-module-less.hbs 三个文件，并新增以下代码

create-module-html.hbs

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>{{ upperFirstName }}</title>
  </head>
  <body>
    <div class="test">
      {{ moduleName }}.html
    </div>
  </body>
</html>

复制代码

create-module-js.hbs

import './{{ moduleName }}.less'

复制代码

create-module-less.hbs

@import '@/assets/fonts/iconfont.css';

复制代码

到这里，我们的 plop 配置就结束了，试着运行 pnpm run p 命令，会在控制台看到

然后输入要创建的模块名称，如 mian

当得到以上提示后，我们就可以在 src/views 中看到创建的 main 模块了，里面的文件内容也有了初始内容。

总结

plop 极大提高了我们的开发效率，特别是模块较多初始文件时，效果也是会更明显，减少了手动出错的概率。

如果需要更多配置，请阅读官方文档 plop文档

如果对文章中的 plop 配置感兴趣，可以自行拉取代码尝试，项目Demo

自动生成文件模块工具 - plop

安装

配置模版

总结

猜你喜欢