CLI-программа для быстрой генерации компонентов (или любых других файлов)

Умеет генерировать файлы любых расширений.

npm:

npm install --save-dev gvegas-cfc

yarn:

yarn add -D gvegas-cfc

Папка с шаблонами:

Создайте в корне проекта папку с любым удобным для вас названием. Например, создадим родительскую папку templates.

В папке templates создадим две папки с шаблонами: PageComponent и UIComponent.

Структура директорий должна получится следующей:

<rootdir>
│
├── templates
│   ├── PageComponent
│   └── UIComponent

Далее заполним папки шаблонов:

<rootdir>
│
├── templates
│   │
│   ├── PageComponent
│   │   ├── UI
│   │   │   ├── Template.async.tsx
│   │   │   ├── Template.stories.tsx
│   │   │   └── Template.tsx
│   │   └── index.ts
│   │
│   └── UIComponent
│       ├── UI
│       │   ├── Template.module.scss
│       │   ├── Template.stories.tsx
│       │   ├── Template.test.tsx
│       │   └── Template.tsx
│       └── index.ts
│

Скрипт для создания файлов

"create:ui": "npx gvegas-cfc create -t ./templates/UITemplate -o ./output UITest" Скрипт принимает 3 аргумента:

• -t | --template. Название шаблона (Название папки шаблона, например UIComponent).
• -o | --output Путь, куда должны сгенерироваться файлы.
• Название сгенерированного файла

Запускаем:

npx gvegas-cfc create -t ./templates/UITemplate -o ./output UITest

Но проще будет добавить scripts в package.json:

{
...
    "scripts": {
        "create:ui": "npx gvegas-cfc create -t ./templates/UITemplate -o ./output"
    },
...
}

После этого мы можем запустить:

npm:

npm run create:ui UITest

или

yarn:

yarn create:ui UITest

Настройка gvegas-cfc завершена!