Get into the habit of writing together! This is the second day of my participation in the "Nuggets Daily New Plan · April Update Challenge", click to view the details of the event .

In daily development, we all encounter this scenario. Every time we develop a new module, we need to manually create a file and add default content to it. Especially in the development of component libraries, it is necessary to create multiple files at one time.

Today, I recommend an automatic file generation module tool plop , which can quickly generate the modules we need in the form of commands, which greatly facilitates our development.

Install

plopYou can choose to install it globally or in the project, here we use the installation in the project

pnpm i plop -D
复制代码

After package.jsonthe scriptadd the run command in the . Since we are not creating the plopfile.jsfile need to re-specify the file path.

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

configuration template

Suppose, our current directory structure is as follows

1649315453(1).png

In the form of multiple pages, each page has three types of files html, javaScript, css, and some default content.

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';

复制代码

Next, we need to configure plopto help us create a basic template

First create a plopdirectory to place our template configuration code, plopand create generatorand templatedirectory generatorto place the plopgenerated file template code, which templateis used to place the template code.

Next generator, create a create-module.jsfile under , and add the following code

// 首字母转大写
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
    }
  })
}

复制代码

After creating the execution code, we need to create the template code, plopso add the templatedirectory in , and create three files create-module-html.hbs, create-module-js.hbs, create-module-less.hbs, and add the following code

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';

复制代码

At this point, our plopconfiguration is over, try to run the pnpm run pcommand, you will see in the console

Then enter the name of the module you want to create, likemian

When we get the above prompt, we src/viewscan see the created mainmodule in , and the content of the file in it also has the initial content.

Summarize

plopIt greatly improves our development efficiency, especially when there are many initial files in the module, the effect will be more obvious, reducing the probability of manual errors.

If you need more configuration, please read the official documentation plop documentation

If you are interested in the plopconfiguration , you can try to pull the code yourself, the project Demo

Automatically generate file module tool - plop

Install

configuration template

Summarize

Guess you like