¡Acostúmbrate a escribir juntos! Este es el segundo día de mi participación en el "Nuggets Daily New Plan · April Update Challenge", haz clic para ver los detalles del evento .

En el desarrollo diario, todos nos encontramos con este escenario: cada vez que desarrollamos un nuevo módulo, necesitamos crear manualmente un archivo y agregarle contenido predeterminado. Especialmente en el desarrollo de bibliotecas de componentes, es necesario crear varios archivos a la vez.

Hoy, recomiendo una herramienta de módulo de generación automática de archivos plop , que puede generar rápidamente los módulos que necesitamos en forma de comandos, lo que facilita mucho nuestro desarrollo.

Instalar

plopPuede elegir instalarlo globalmente o en el proyecto, aquí usamos la instalación en el proyecto

pnpm i plop -D
复制代码

Una vez completada package.jsonla scriptagregue el comando ejecutar en el archivo .Dado que no estamos creando el plopfile.jsarchivo volver a especificar la ruta del archivo.

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

plantilla de configuración

Supongamos que nuestra estructura de directorios actual es la siguiente

1649315453(1).png

En forma de varias páginas, cada página tiene tres tipos de archivos html, javaScript, cssy algún contenido predeterminado.

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'

复制代码

menos

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

复制代码

A continuación, debemos configurar ploppara ayudarnos a crear una plantilla básica

Primero, cree un plopdirectorio para colocar nuestro código de configuración de plantilla, plopy cree generatory templatedirectorio generatorpara colocar el código de plantilla de archivo plopgenerado , que templatese utiliza para colocar el código de plantilla.

A continuación generator, cree un create-module.jsarchivo en y agregue el siguiente código

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

复制代码

Después de crear el código de ejecución, necesitamos crear el código de la plantilla, plopasí que agregue el templatedirectorio y cree tres archivos create-module-html.hbs, create-module-js.hbsy create-module-less.hbsagregue el siguiente código

crear-módulo-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>

复制代码

crear-módulo-js.hbs

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

复制代码

crear-módulo-less.hbs

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

复制代码

En este punto, nuestra plopconfiguración ha terminado, intente ejecutar el pnpm run pcomando, verá en la consola

Luego ingrese el nombre del módulo que desea crear, comomian

Cuando recibimos el mensaje anterior, src/viewspodemos ver el mainmódulo creado en , y el contenido del archivo también tiene el contenido inicial.

Resumir

plopMejora enormemente nuestra eficiencia de desarrollo, especialmente cuando hay muchos archivos iniciales en el módulo, el efecto será más obvio, reduciendo la probabilidad de errores manuales.

Si necesita más configuración, lea la documentación oficial plop documentación

Si está interesado en la plopconfiguración , puede intentar obtener el código usted mismo, la demostración del proyecto

Generar automáticamente la herramienta de módulo de archivo - plop

Instalar

plantilla de configuración

Resumir

Supongo que te gusta