React.js Uygulamasına Webpack Alias Ekleme ve WebStorm’da Kullanma

Herkese merhabalar,

Projelerimizi gerek kendi başımıza gerekse ekip halinde geliştirirken modüllere ayırıp, ayırdığımız modüller üzerinde geliştirme yaparız. Tabii ki bu yaklaşım projelerimizde birçok import statement’ında beraberinde getirmekte. Biz programcılar olarak sürekli değişen isteklere hızlı cevap vermek, projemizi güncel tutmak ve üzerinde olacak değişiklikleri hatasız ve olabildiğince hızlı bir şekilde gerçekleştirmek zorundayız.

Bazen projemize gelen bir istek, bütün proje dosyalarımızı alt üst edebilir, dosyalarımız düzenini değiştirme, isimleri düzenleme vs. yapmamızı gerektirir. Bu değişikliğinde en esnek bir şekilde gerçekleşmesi için de alias’lar yani takma isimler kullanırız.

Dosyaların konumlarını değiştirirken göz önüne almamız gereken import’ta verdiğim path’in de değişmesi gerektiği. Peki biz importlarımız hep relative versek? Yarın bir gün projenin dosyalarını değiştirdiğimizde sizce refactor’u nasıl olur? Mesela bir örnekle inceleyelim.

Mesela view.js diye bir dosyamız olsun ve içinde 3 tane farklı component import edelim.

import Button from "../../Button/Button"
import Badge from "../../Badge/Badge"
import Cards from "../../Card/Card"

Bu şekilde, view.js’ın bulunduğu yerden iki kere yukarı çık, ordan dosyaları bulabilirsin demiş olduk. Peki bu yaklaşım -relative path- doğru mu? Yarın bugün ben view.js’ı farklı bir klasöre taşısam ne olacak? Buradaki importları manuel olarak refactor etmem gerekecek. -bazı ideler bunu gerçekleştiriyor olabilir. Nedense bana bu noktada başarılı olan denk gelmedi.- Bunun için alias kullanıyoruz, şimdi react projemizde alias nasıl configure ediyoruz görelim..

Peki webpack configurationunda bu ayarı nasıl yapacağız?

Webpack alias ayarını bu şekilde yapıyormuşuz.

Tamam güzel de bunu nereye, nasıl yazacağız? create-react-app template’inde herhangi bir webpack.config.js vs göremiyoruz?

React’ın documentation’ununa baktığımızda

“You don’t need to install or configure tools like Webpack or Babel. They are preconfigured and hidden so that you can focus on the code.”

Yani kısaca biz ayarladık, sana gizledik sen koduna yaz diyor.

İlla istiyosak da

npm run eject

çalıştır diyor. Tabii, Bi kere bu script’i çalıştırdın mı bir daha geri dönemiyorsun. Community neyi öneriyor tabii? Kısaca bu yaklaşımdan uzak dur başka bir yol bul.

Peki alternatif yol ney? Abi biz hiç eject vs. uğraşmayalım. Bir şekilde react ekibinin yazdığı webpack configuration’un üzerinde overwrite edelim. Çalışan sisteme dokunmayalım.. Peki bunun için ne var??

timarney/react-app-rewired

Tweak the create-react-app webpack config(s) without using ‘eject’ and without creating a fork of the react-scripts.

Fork’a, eject’e gerek kalmadan kendine özel webpack config yazabilirsin diyor. Bu ne demek, istersem loader yazarım, istersem plugin eklerim. Özgürüm.. Gayet güzel.. Devam edelim. Nasıl kuracağız görelim.

$ npm install react-app-rewired --save-dev

Yüklüyoruz, development dependency olarak kaydediyoruz.

Projemizin root directory’sinde config-overrides.jsadlı dosyamızı oluşturuyoruz. Ve içine override fonksiyonumuzu ekliyoruz. Son durum şu şekilde.

Sonrasında package.json’a girerek default olarak gelen react-scriptleri değiştiriyoruz

sonrasında npm start veya npm run build çalıştırıyoruz. Gayet başarılı. Konumuz alias eklemek olduğu için src dosyasını artık @ olarak tanı, ayarımızı yapıyoruz. Siz isterseniz @ yerine başka bir şey de yazabilirsiniz.

const path = require('path')

module.exports = function override(config, env) {
    config.resolve = {
        alias: {
            "@": path.resolve(__dirname, "src"),
        }
    };
    return config;
}

Şimdi uygulamamızda @ ile import yapabiliyoruz Fakat webstorm bunu nasıl bilecek? Bir componentte cmd+enter bastığımız zaman hala bize relative path sunuyor?

Bunun için

Preferences => Languages and Frameworks => JavaScript => Webpack sekmesine giriyoruz.

buradan da override ettiğimiz config-overrides.js dosyamızı seçiyoruz ve işlem tamam.

Böylelikle, webstorm yazdığımız alias’ı tanıyor..

Bu arada Vue ekibi kendi webpack.config.js lerine @ alias’ını gömmüş. Eğer vue de bunu gerçekleştirecekseniz, direkt Preferences => Languages and Frameworks => JavaScript => Webpack girin node_modules içerisinden vuenin web.config.js’ini seçin işlem Tamam.

Buda böyle bir tecrübe oldu. Belki aynı şeyi yapmak isteyenler olur. İnternette bu konu hakkında toplu bir çözüm göremedim. Çokta bakmadım belki. Sadece 3 tane çözümün parçalarını birleştirip, yazayım dedim. En azından ingilizce varsa bile türkçe bu üç çözümü de birleştiren bir makale olsun istedim..

Herkese kolay gelsin.