Create React App’ın Özelleştirilmesi

Bu yazıda React’ın sunduğu Create React App projesinin istenilen özellikler ile değiştirilerek özel bir Create React App şablonun nasıl oluşturulacağını göstereceğim. Eğer sürekli React ile çalışıyor ve yeni projeler açıp her defasında redux, router gibi kütüphaneleri ekleyerek klasör yapısı oluşturuyorsanız bu yazı tam size göre. Yapılan özel create-custom-create-app şablonu ile istediğimiz kütüphaneler, klasör yapısı ve başlangıç dosyalarımız (Örneğin Redux Store’un oluşturulması) tek bir komut ile otomatik olarak oluşturulur.

Bu projenin son haline GitHub üzerinden erişebilirsiniz: Link

Projenin Oluşturulması & Gerekli Paketlerin Yüklenmesi

Proje npm init ile oluşturulur ve gerekli paketler yüklenir.

npm init -y
npm install --save colors commander

Yüklenen paketlerde, colors terminale renkli çıktı vermemizi sağlarken commander, uygulamaya verilen argümanları parse etmemizi kolaylaştırır.

Oluşturulan Projeye Kopyalanacak Şablon Dosyalarının Oluşturulması

CRA (CustomReactApp) ile oluşturulan React projesine kopyalanacak dosyalarımız template/ dizini altında oluşturulur.

App.tsx — App bileşeni

App.test.tsx — App bileşenin test dosyası

index.scss

index.tsx

store.ts — Redux Store’u bu dosyada oluşturulur.

Bu dosyalar oluşturacağımız şablon ile gerekli yerlere kopyalanmalıdır.

Varsayılan Özelliklerin Eklenmesi

Uygulamamız bu dosyadaki değerlere göre varsayılan işlemleri yerine getirmektedir. (Örneğin silinecek ve kopyalanacak dosyalar, yüklenecek paketler vb.) defaults.js dosyasına:

İşlemlerin Gerçekleştirileceği Tasks Dosyasının Oluşturulması

CRA ile oluşturulan projede dosya kopyalama, silme, paketleri yükleme gibi işlemleri yapacak fonksiyonlar tasks.js dosyasında tek tek tanımlanırlar.

Gerekli import’lar ve işlemleri çalıştıracak ana fonksiyon:

Yukarıdaki kod örneğinde İşlemleri gerçekleştiren fonksiyonlar kısmına gerekli işlemleri yapan fonksiyonlar eklenir.

Dosya silme işlemi için deleteFiles:

Dosya kopyalama işlemi için copyFiles:

Dizin oluşturma işlemi için createDirectories:

CRA projesini çalıştırmak için createReactApp:

Gerekli paketleri yüklemek için installPackages:

Şablonun Ana Dosyasının Oluşturulması

Şablonumuz ilk çağırıldığında bu dosya çalışacaktır. Bu dosya gerekli argümanları konsoldan alır, işler ve bu argümanlara göre projeyi oluşturur. Argümanların işlenmesi için index.js dosyasına:

Şablonumuz farklı argümanlar ile işlemlerini gerçekleştirir. Örneğin with-mui argümanı ile oluşturulacak projeye MaterialUI kütüphanesi eklenir. Ayrıca -e argümanı ile oluşturulacak projeye ekstra paketler yüklenir. (-e argümanına verilen paketlerin sonuna ::dev eklenirse bu paketler development olarak projeye yüklenir: npm install — save-dev)

Eğer şablona with-mui veya with-antd parametreleri verildiyse bunları yüklenecek paketlere eklemek için index.js dosyasına:

Ekstra olarak (-e parametresi ile) belirtilen paketlerin varsayılanlara eklenmesi işlemi için index.js dosyasına:

Şablon’un proje oluşturmadan önce belirlenen ayarları kullanıcıya göstererek onay alması için ayarları ekrana yazdıran aşağıdaki fonksiyonlar index.js dosyasına eklenir:

NodeJS ortamında kullanıcıdan tuş girdisi almak için aşağıdaki fonksiyon index.js dosyasına eklenir. Bu fonksiyon parametre olarak verilen dizideki herhangi bir tuşa basılmasını bekler. Eğer basılmazsa hata döndürür.(Promise.Reject)

Konfigurasyonu göstermek ve kullanıcı onayından sonra bütün işlemleri başlatmak ve işlemleri beklemek için index.js dosyasına run asenkron fonksiyonu eklenir:

Son olarak run fonksiyonunu çağırmak veya show parametresi geldiğinde sadece yüklenecek standart paketleri göstermek için index.js dosyasının en altına eklenir:

Şablonun Yüklenmesi ve Başlatılması

Yüklemeden önce şablonumuzun çalıştırılabilir dosyasını oluşturmak için package.json dosyasına yeni bir key ile bin değeri eklenmelidir:

"bin": {
     "create-custom-react-app": "index.js"
}

Hazırladığımız şablonu yüklemek ve çalıştırmak için aşağıdaki komut kullanılabilir:

#Yüklemek için:
npm link
#Örnek kullanım:
create-custom-react-app react-project --extra lodash @types/lodash

NOT: Herhangi bir kullanıcı şablonumuzu indirirdiği zaman -g parametresi ile birlikte sistemine yüklediğinde link işlemine gerek kalmamaktadır. (npm install -g create-custom-react-app)

Okuduğunuz için teşekkürler. Projenin son ve test kodlarının eklenmiş sürümüne GitHub üzerinden erişebilirsiniz: create-custom-react-app.