reactcci

React erstellen Komponenten Interaktive CLI

CLI zum Erstellen oder Bearbeiten von Reaktionen oder Reagieren native Komponenten mit Ihrer eigenen Struktur

• Plug -and -Play : Sofortkonfiguration für CRA mit TypeScript
• Einfach zu konfiguriert : interaktive Konfiguration und einfache Vorlagen
• Tolle Dokumentation : Weitere Informationen auf unserer Website
• Funktioniert mit allem : TypeScript, Storybook, Redux, Scherz, ...
• Leichtes Gewicht : <40 KB + 3 kleine Bibliotheken
• Schnelle Suche : Sehr schnell auswählen Ort für neue Komponenten durch dynamische Suche
• Viel nach einem Befehl : Tonne Dateien nach Multi-Creation-Funktion
• Erstellt für React : Besser als Plop , Hygen oder eine Gerüstbibliothek, weil es für React ist
• Multiplattform : Funktioniert auf MacOS, Windows und Linux.
• VSCODE -Erweiterung
• Webstorm -Integration

Verwendet von

Schnelle Übersicht

Über Garn und interaktiver Modus

 $ yarn add -D reactcci
$ yarn rcci

oder über NPM und Flags

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

Installation

Über NPM zu installieren:
npm install --save-dev reactcci

Über Garn zu installieren:
yarn add --dev reactcci

Konfiguration

Beim ersten Run -CLI werden Sie nach automatischer Konfiguration gefragt. Führen Sie einfach einen Befehl aus:
npx rcci
Dieser Befehl erstellt Datei rcci.config.js und Vorlagenordner mit grundlegender Vorlagenmenge.

Die Konfigurationsdatei enthält die nächsten Parameter:

• folderPath
  Root -Verzeichnis, um Ihre Komponenten oder eine Array von Pfaden zu platzieren
  Standard: src/

• templatesFolder
  Pfad zu Ihren eigenen Komponentenvorlagen
  Standard: templates

• multiProject
  Ermöglicht die Einrichtung von Konfigurationen für Mono-Repository mit mehreren Projekten
  Standard: false

• skipFinalStep
  Ermöglicht das Ausschalten des letzten Überprüfungsschritts
  Standard: false

• checkExistenceOnCreate
  Ermöglicht das Einschalten der Überprüfung der Komponenten -Existenz auf Erstellen, um das Ersetzen zu vermeiden
  Standard: false

• templates
  Objekt mit Struktur Ihrer Komponente

• processFileAndFolderName
  Zeichenfolge oder Funktion, mit der Sie Ihren Komponentennamen in Ordnername und Dateiname-Präfix überordnen können
  Standard: PascalCase
  Typen:

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

  Beispiel:

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

• placeholders
  Liste der Platzhalter, mit denen Sie Ihre eigene Komponentenvorlage erstellen können
  Standard:
  #NAME# für einen Komponentennamen
  #STYLE# für CSS-Module Import
  #STORY_PATH# für den Storybook -Titel

• afterCreation
  Objekt mit Skripten, um Sie nach der Erstellung zu verarbeiten
  Standard: undefined
  Beispiel:

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

Platzhalter

Jeder Platzhalter ist eine Funktion, die einige Daten zum Aufbau Ihres eigenen Platzhalters erhält.
Während der Erstellung mehrerer Komponenten werden alle Funktionen für jede einzelne Komponente aufgerufen.
Beispiel:

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

Nach dieser Einrichtung können Sie diesen Platzhalter mit #NAME# in Ihren Vorlagendateien verwenden.
Im Folgenden finden Sie die Liste aller verfügbaren Daten und Funktionen, um eine neue zu erstellen.

Feld	Beschreibung
project	Projektname im Multy-Project-Modus
componentName , objectName	Name der Komponente oder ein anderes Objekt im Multi-Template-Modus
objectType	Art des Objekts, der vom Benutzer ausgewählt wurde. Es ist standardmäßig component .
pathToObject	Pfad zum Objektordner Beispiel: src/components
destinationFolder	Relativer Weg zum Ordner des Objekts, der erstellt wird Beispiel: App/Header/Logo
objectFolder	Absoluter Pfad zu Ihrem Objekt (Komponenten-) Ordner
relativeObjectFolder	Relativer Pfad zu Ihrem Objektordner (Komponenten)
filePrefix	Name des verarbeiteten Objekts (Komponenten) für den Dateinamen
folderName	Name des verarbeiteten Objekts (Komponenten) für den Ordner
files	Objekt von Dateien, die erstellt werden
getRelativePath(to: string)	Funktion, um einen relativen Weg zu einem anderen Weg zu erreichen Beispiel: ../../src/helpers
join(...parts: string)	Funktion, um mit Teilen des Pfades verbunden zu werden. Beispiel: join(project, destinationFolder, componentName) => Project/Footer/Email
stringToCase(str: string, toCase: string)	Funktion, um eine Zeichenfolge auf Fall zuzuordnen. Beispiel: stringToCase('dash-case-string', 'PascalCase') => DashCaseString

Argumente

• --update , -u
  So aktivieren
• --dest , -d
  So setzen
• --skip-search , -s
  So überspringen Sie die Auswahl der interaktiven Ordner, um das Argument dest so zu verwenden, wie es ist
• --name , -n
  So setzen
• --files , -f
  So setzen Sie Dateien zum Erstellen oder Aktualisieren, statt die interaktive Auswahl
  Beispiel: --files style test component[1]
  Erstellt optionale Dateien wie style und test und wählt den zweiten Komponentenstyp nach Index aus
• --project , -p
  Das Projekt im Mehrprojekt-Modus festlegen
• --sls
  So überspringen Sie den letzten Übereinstimmungsschritt wie skipFinalStep in der Konfigurationsdatei

Multi-Template

Wenn Sie etwas anderes generieren müssen, nicht nur Komponenten, können Sie eine Array von Vorlagen einrichten.
Beispiel 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'
                }
            }
        }
    ]
} 

Lizenz