Автоматическое создание файлов в вашем приложении на React/Next Js

Создание файлов — это один из первых шагов в создании успешного приложения, но необходимость создавать файлы по определенному шаблону несколько раз и вручную может стать очень утомительной 😪.

Привет мой дорогой читатель, как ты сегодня?
Сегодня я расскажу вам, как автоматизировать создание файлов в react/next js с помощью так называемого Plop.

Что такое Plop? Это фреймворк микрогенераторов, который позволяет всей команде легко создавать файлы с определенным уровнем единообразия.

По крайней мере, так они говорят, и это действительно так.

К главному вопросу: как использовать этот замечательный пакет?

  1. Установите его из npm
  2. После успешной установки вам нужно будет создать две вещи
  3. файл под названием plopFile.js: в нем вы должны определить действия, которые вы хотите выполнить.
  4. папку под названием templates: в этой папке вы создадите файл, который будет копировать plopFile, то есть то, как вы хотите, чтобы выглядел сгенерированный файл.

Давайте поговорим о папке templates. Итак, в этом посте я предположу, что мы работаем в папке components для создания компонентов (таких как Button, Text, Inputs…) для нашего приложения.

Цель — создать первый компонент, Button.

Вернитесь в папку templates, создайте еще одну папку под названием components, и в этой папке создайте файл component.hbs. Plop работает с hbs-файлами, поэтому мы его так и назвали.

В файле component.hbs создадим скелет того, как должен выглядеть каждый из наших компонентов, как показано ниже.

import React from 'react';

export const {{name}} = () => {
  return (
    <div>
      {{name}}
    </div>
  );
}
Вход в полноэкранный режим Выход из полноэкранного режима

Каждый созданный нами файл компонента будет иметь такой формат.
Вы можете задаться вопросом, откуда, черт возьми, берется {{name}}, Лукас? 🧐

Давайте посмотрим. {{name}} — это имя, которое мы даем нашему компоненту при его создании, например Button, Text…, но где же мы его задаем?

Вот тут-то и приходит на помощь plopFile.js. Давайте перейдем туда.

Я предполагаю, что вы сейчас находитесь внутри файла.

  • Файл plop начинает свою жизнь как модуль node, который создает функцию, принимающую объект plop в качестве первого параметра.
  • Объект plop открывает объект plop API, который содержит функцию setGenerator(name, config). Это функция, которую вы используете для (подождите) создания генератора для данного plopfile. Когда plop будет запущен с терминала в этом каталоге (или любом подкаталоге), будет отображен список этих генераторов. В нашем случае изменим название на components, так как мы будем работать с файлами компонентов.
  • В конфиге находятся description, prompts и actions. Что это такое? 🤔description: простое описание того, что делает этот генераторprompts: пользовательская функция взаимодействия с пользователем для командной строки, где вы задаете вопросы, например, какой компонент вы хотите создать.actions: как следует из названия, это папка actions, где вы определяете, в какой папке вы хотите создать компонент, какой формат использовать (templates/components/component) и другие интересные вещи.
  • Наконец, вы экспортируете созданную функцию.

Давайте посмотрим на это в действии.

const config = (plop) => {
  plop.setGenerator('components', {
    description: 'A component generator for the app',
    prompts: [
      {
        type: 'input',
        name: 'name',
        message: 'Enter component name',
      },
    ],
    actions: [
      {
        type: 'add',
        path: 'components/{{pascalCase name}}/{{pascalCase name}}.jsx',
        templateFile: 'templates/components/component.hbs',
      },
    ],
  });
};

module.exports = config;
Вход в полноэкранный режим Выход из полноэкранного режима

В prompts, вы заметите, что мы устанавливаем значение name в name, и это то, из чего мы получили name в templates/components/component. Это может быть что угодно, может быть name: something или name: another_thing, практически что угодно.

В рамках действий существуют различные type действия, которые могут быть выполнены, такие как append, modify, addMany…, но мы будем использовать add сегодня для целей этой заметки, чтобы добавить файл в папку.

Путь описывает, по какому пути мы хотим создать файл. Вы также заметите, что у нас есть строка {{pascalCase name}}, в основном у нас есть различные модификаторы регистра, такие как camelCase, pascalCase, lowerCase среди прочих, так что мы в основном говорим plop использовать pascalCase для создаваемого файла, а имя берется из name: name.

В templateFile мы переходим к формату, в котором мы хотим создать наш файл.

Чтобы запустить то, что мы только что создали, выполните simlpy run

yarn run plop
Войти в полноэкранный режим Выйти из полноэкранного режима

в вашем терминале.

Работает как по волшебству 🧞.

Поздравляем, вы выполнили задание.

Спасибо, что потратили время на прочтение этой статьи.

Дайте мне знать в разделе комментариев ниже, если вы нашли это полезным, если вы знали об этом раньше, или насколько продуктивным, по вашему мнению, это сделает вас.

Ниже приведены ссылки на полезные ресурсы:
Документация Plop

Видеоподдержка Youtube.

В следующем посте я покажу вам расширенные возможности Plop, например, случай, когда вы можете добавить файл в файл.

Пока 👣

Оцените статью
devanswers.ru
Добавить комментарий