reactcci

React создать компонент Interactive CLI

CLI для создания или редактирования реагирования или реагирования собственных компонентов с вашей собственной структурой

• Подключить и воспроизвести : мгновенная конфигурация для CRA с TypeScript
• Легкая конфигурация : интерактивная конфигурация и простая шаблона
• Отличная документация : больше информации на нашем сайте
• Работает с чем угодно : TypeScript, Storybook, Redux, Jest, ...
• Легкий вес : <40KB + 3 небольшие библиотеки
• Быстрый поиск : очень быстро выбирая место для нового компонента с помощью динамического поиска
• Много по одной команде : тонна файлов по функции многофункционального
• Создано для React : лучше, чем Plop , Hygen или любая библиотека лесов, потому что это для React
• Multiplatform : работает на MacOS, Windows и Linux.
• Расширение VSCODE
• Интеграция в Интернете

Используется

Быстрый обзор

Через пряжу и интерактивный режим

 $ yarn add -D reactcci
$ yarn rcci

или через NPM и флаги

 $ npm i -D reactcci
$ npx rcci --name Header Body Footer --dest src/App

Установка

Чтобы установить через NPM:
npm install --save-dev reactcci

Чтобы установить через пряжу:
yarn add --dev reactcci

Конфигурация

На первом запуске CLI спросит вас об автоматической конфигурации. Просто запустите команду:
npx rcci
Эта команда создает файл rcci.config.js и папку шаблона с основным набором шаблонов.

Файл конфигурации содержит следующие параметры:

• folderPath
  Корневой каталог для размещения ваших компонентов или массива пути
  По умолчанию: src/

• templatesFolder
  Путь к собственным шаблонам компонентов
  По умолчанию: templates

• multiProject
  Позволяет настроить конфигурацию для моно-репозиции с несколькими проектами
  По умолчанию: false

• skipFinalStep
  Позволяет выключить последний шаг проверки
  По умолчанию: false

• checkExistenceOnCreate
  Позволяет включить включение компонента.
  По умолчанию: false

• templates
  Объект со структурой вашего компонента

• processFileAndFolderName
  Строка или функция, которая позволяет переоценить имя вашего компонента в плюс и префикс с именем файла
  По умолчанию: PascalCase
  Типы:

  • camelCase
  • PascalCase
  • snake_case
  • dash-case
  • (name: string, parts: string[], isFolder: boolean) => string

  Пример:

   {
      ... config ,
      processFileAndFolderName : ( name , parts , isFolder ) => 
          isFolder ? name : parts . map ( ( part ) => part . toLowerCase ( ) ) . join ( '-' )
  }

• placeholders
  Список заполнителей, которые вы можете использовать для создания собственного шаблона компонента
  По умолчанию:
  #NAME# для имени компонента
  #STYLE# для импорта CSS-модуля
  #STORY_PATH# для названия сборника рассказов

• afterCreation
  Объект со сценариями для обработки вас после создания
  По умолчанию: undefined
  Пример:

   {
      ... config ,
      afterCreation : {                
          prettier : {
              extensions : [ '.ts' , '.tsx' ] , // optional
              cmd : 'prettier --write [filepath]'
          }
      }
  } 

Заполнители

Каждый заполнитель - это функция, которая получает некоторые данные для создания собственного заполнителя.
Во время создания нескольких компонентов все функции будут вызваны для каждого отдельного компонента.
Пример:

placeholders: {
    NAME : ( { componentName } ) => componentName
}

После этой настройки вы можете использовать этот заполнитель по #NAME# внутри ваших шаблонных файлов.
Ниже вы можете увидеть список всех доступных данных и функций для создания нового.

Поле	Описание
project	Название проекта в режиме Multy-Project
componentName , objectName	Название компонента или другого объекта в режиме с несколькими частями
objectType	Тип объекта, который был выбран пользователем. Это component по умолчанию.
pathToObject	Папка «Путь к объектам Пример: src/components
destinationFolder	относительный путь к папке объекта, который создается Пример: App/Header/Logo
objectFolder	Абсолютный путь к папке объекта (компонент)
relativeObjectFolder	Относительный путь к папке объекта (компонент)
filePrefix	Имя обработанного объекта (компонент) для имени файла
folderName	Имя обработанного объекта (компонент) для папки
files	Объект файлов, который создается
getRelativePath(to: string)	Функция, чтобы получить относительный путь к любому другому пути Пример: ../../src/helpers
join(...parts: string)	Функция, чтобы получить объединенные части пути. Пример: join(project, destinationFolder, componentName) => Project/Footer/Email
stringToCase(str: string, toCase: string)	Функция для сопоставления любой строки по случаю. Пример: stringToCase('dash-case-string', 'PascalCase') => DashCaseString

Аргументы

• --update , -u
  Для активации режима обновления для добавления новых файлов в компонент или для замены существующих
• --dest , -d
  Чтобы установить абсолютный или назначенный путь для создания или обновления компонента
• --skip-search , -s
  Чтобы пропустить интерактивный выбор папок, чтобы использовать аргумент dest , как есть
• --name , -n
  Чтобы установить имя компонента или имена, разделенные на пространство для создания нескольких
• --files , -f
  Чтобы установить файлы для создания или обновления, вместо этого интерактивный выбор
  Пример: --files style test component[1]
  Создаст дополнительные файлы, такие как style и test и выберет второй тип компонента по индексу
• --project , -p
  Чтобы установить проект в многопроектом режиме
• --sls
  Чтобы пропустить последнее соглашение, как skipFinalStep в файле конфигурации

Многооборотный

Если вам нужно сгенерировать что -то еще, а не только компоненты, вы можете настроить массив шаблонов.
Пример Bellow:

 {
    ... config ,
    templates : [
        {
            name : 'component' , // will be added to default folderPath folder
            files : {
                index : {
                    name : 'index.ts' ,
                    file : 'component.ts'
                }
            }
        } ,
        {
            name : 'service' ,
            folderPath : 'services/' , // will be added by the specific path
            files : {
                index : {
                    name : 'index.ts' ,
                    file : 'service.ts'
                }
            }
        }
    ]
} 

Лицензия