reactcci

Bereaksi membuat komponen interaktif cli

CLI untuk membuat atau mengedit reaksi atau reaksi komponen asli dengan struktur Anda sendiri

• Plug and Play : Konfigurasi Instan untuk CRA dengan TypeScript
• Mudah dikonfigurasi : Konfigurasi interaktif dan templating sederhana
• Dokumentasi Hebat : Info lebih lanjut di situs web kami
• Bekerja dengan apa pun : naskah, buku cerita, redux, jest, ...
• Ringan : <40kb + 3 perpustakaan kecil
• Pencarian Cepat : Tempat Pemilihan Sangat Cepat untuk Komponen Baru dengan Pencarian Dinamis
• Banyak dengan satu perintah : ton file dengan fitur multi-penciptaan
• Dibuat untuk Bereaksi : Lebih Baik Daripada Plop , Hygen atau Perpustakaan Perancah, Karena Ini Untuk Bereaksi
• Multiplatform : Bekerja pada macOS, windows, dan linux.
• Ekstensi VScode
• Integrasi Webstorm

Digunakan oleh

Tinjauan cepat

Melalui benang dan mode interaktif

 $ yarn add -D reactcci
$ yarn rcci

atau melalui NPM dan bendera

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

Instalasi

Untuk menginstal melalui NPM:
npm install --save-dev reactcci

Untuk menginstal melalui benang:
yarn add --dev reactcci

Konfigurasi

Pada First Run CLI akan bertanya tentang konfigurasi otomatis. Cukup jalankan perintah:
npx rcci
Perintah ini membuat file rcci.config.js dan folder template dengan set template dasar.

File konfigurasi berisi parameter berikutnya:

• folderPath
  Root Directory untuk menempatkan komponen Anda, atau array jalur
  Default: src/

• templatesFolder
  Jalur ke template komponen Anda sendiri
  Default: templates

• multiProject
  Memungkinkan Anda mengatur konfigurasi untuk mono-repositori dengan beberapa proyek
  Default: false

• skipFinalStep
  Memungkinkan Anda untuk mematikan langkah pemeriksaan terakhir
  Default: false

• checkExistenceOnCreate
  Memungkinkan Anda untuk menyalakan keberadaan komponen periksa di Create untuk menghindari penggantian
  Default: false

• templates
  Objek dengan struktur komponen Anda

• processFileAndFolderName
  String atau fungsi yang memungkinkan Anda untuk mengubah nama komponen Anda ke folder-name dan awalan file-file
  Default: PascalCase
  Jenis:

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

  Contoh:

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

• placeholders
  Daftar placeholder yang dapat Anda gunakan untuk membangun template komponen Anda sendiri
  Bawaan:
  #NAME# untuk nama komponen
  #STYLE# untuk Impor Modul CSS
  #STORY_PATH# untuk judul buku cerita

• afterCreation
  Objek dengan skrip untuk memproses Anda mengajukan setelah pembuatan
  Default: undefined
  Contoh:

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

Placeholder

Setiap placeholder adalah fungsi yang mendapatkan beberapa data untuk membangun pemegang placeholder Anda sendiri.
Selama beberapa komponen pembuatan semua fungsi akan dipanggil untuk setiap komponen tunggal.
Contoh:

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

Setelah pengaturan ini, Anda dapat menggunakan placeholder ini dengan #NAME# di dalam file template Anda.
Di bawah ini, Anda dapat melihat daftar semua data dan fungsi yang tersedia untuk membuat yang baru.

Bidang	Keterangan
project	Nama proyek dalam mode multy-proyek
componentName , objectName	Nama komponen atau objek lain dalam mode multi-template
objectType	Jenis objek yang dipilih oleh pengguna. Ini adalah component secara default.
pathToObject	Folder Path to Objects Contoh: src/components
destinationFolder	jalur relatif ke folder objek yang sedang dibuat Contoh: App/Header/Logo
objectFolder	Folder Jalur Absolut ke Objek (Komponen) Anda
relativeObjectFolder	Path Relatif ke Folder Objek (Komponen) Anda
filePrefix	Objek yang diproses (komponen) Nama untuk nama file
folderName	Objek yang diproses (komponen) Nama untuk folder
files	Objek file yang sedang dibuat
getRelativePath(to: string)	Berfungsi untuk mendapatkan jalur relatif ke jalur lain Contoh: ../../src/helpers
join(...parts: string)	Fungsi untuk bergabung dengan bagian jalur. Contoh: join(project, destinationFolder, componentName) => Project/Footer/Email
stringToCase(str: string, toCase: string)	Fungsi untuk memetakan string ke kasing. Contoh: stringToCase('dash-case-string', 'PascalCase') => DashCaseString

Argumen

• --update , -u
  Untuk mengaktifkan mode pembaruan untuk menambahkan file baru ke komponen atau mengganti yang ada
• --dest , -d
  Untuk mengatur jalur absolut atau tujuan untuk membuat atau memperbarui komponen
• --skip-search , -s
  Untuk melewatkan pemilihan folder interaktif untuk menggunakan argumen dest
• --name , -n
  Untuk mengatur nama atau nama komponen dibagi dengan ruang untuk membuat beberapa
• --files , -f
  Untuk mengatur file untuk membuat atau memperbarui, alih -alih pilihan interaktif
  Contoh: --files style test component[1]
  Akan membuat file opsional seperti style dan test dan akan memilih jenis komponen kedua dengan indeks
• --project , -p
  Untuk mengatur proyek dalam mode multi-proyek
• --sls
  Untuk melewatkan langkah perjanjian terakhir seperti skipFinalStep di file config

Multi-template

Jika Anda perlu menghasilkan sesuatu yang lain, bukan hanya komponen, Anda dapat mengatur array templat.
Contoh Di Bawah:

 {
    ... 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'
                }
            }
        }
    ]
} 

Lisensi