1.0.3 • Published 9 months ago
creat-component-app v1.0.3
creat-component-app
Папка проекта
- Предпологается что папка с проектом будет как на примере ниже:
- *если ваш проект выглядит иначе, вы всегда можете поменять пути в скриптах: 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
- Директории:
Удобства
- Для удобства, опции и команды отделены.