/creat-component-app

Небольшая консольная утилита написанная на js (ES6) с использованием node.js + yargs.

Primary LanguageJavaScript

creat-component-app

Данная утилита позволяет забыть о ручном создании компонентов и импорте файла стилей компонента в главный файл стилей проекта.
Создано для совместного использования вместе с nunjucks, но может использоваться и в не его зависимости.
Если структура файлов и папок в вашем проекте другая, вы можете поменять пути в соответствии с вашей структурой.
По умолчанию создана определенная структура проекта.
Для демонстрации создан компонент и подключен файл стилей компонента в главный стилевой файл.

Папка проекта

  • Предпологается что папка с проектом будет как на примере ниже:
  • *если ваш проект выглядит иначе, вы всегда можете поменять пути в скриптах: componentSpawner.mjs и в injectStyles.mjs*
src
├── assets
│   └── styles
│       └── main.scss
└── templates
    └── components

Папка после добавления компонента:

  • после создания компонента структура папок и файлов с шаблонами меняется на:
src/templates
└── components
    └── MyFirstComponent
        ├── dependencies
        ├── MyFirstComponent.json
        ├── MyFirstComponent.njk
        └── MyFirstComponent.scss

Возможности

  • Скрипт для создания компонента с определенным набором файлов и папок
  • Скрипт для добавления @import 'path/to/component/component.scss'; в главный файл стилей в проекте проверяется существование указанной пользователем директории через консоль, если компонент с таким именем найден, то произволится добавление в main.scss файл импорта с полным путём до файла стилей компонента.

Использование:

  • скачиваем необходимые зависимости:
    • npm i
  • После установки зависимостей можно использовать.
  • Для просмотра команд можно ввести просто:
  • creat-component-app
  • Чтобы создать компонент, необходимо вызвать следующие команды:
    • creat-component-app create -n component_name
    • или
    • creat-component-app create --name component_name
  • Функция подставит название которое вы передали в командной строке и создаст на его основе необходимый набор файлов и папок.
  • Чтобы добавить @import 'componentName.scss'; до компонента в главный файл стилей необходимо ввести имя компонента, если скрипт его найдёт то добавит импорт стилей компонента в главный файл стилей, в противом случае выведет информацию об ошибке в консоль. Воспользуйтесь следующими командами:
    • creat-component-app import -s component_name
    • или
    • creat-component-app import --style component_name

Про пути

  • Пути для создания компонент можно поправить в файле componentSpawner.mjs
  • Пути для добавления импорта стилей компонента в главный файл стилей проекта можно править в файле injectStyles.mjs

  • в константе files находятся маски с переменными в которые будут записываться данные пришедшие от пользователя и расширениями для файлов

  • в константе directory находится путь до главной директории в маске передаётся переменная, в которую будет записываться название компонента исходя из полученных данных от пользователя.

  • Зачем нужны эти маски? Вместо обычных путей? Чтобы не писать вручную название файла, расширение и название папки компонента, данные подставятся после того как пользователь введёт их в консоли.

  • Маски выглядят следующим образом:

    • Директории: ./${name}/
    • Файлы: ${name}.njk

Удобства

  • Для удобства, опции и команды отделены.