Webpack ve Babel

Selamlar,

Güçlü olmak istediğim taraflardan bir şeyler aktarmaya devam etmek istiyorum.

Bugünkü yazımda ise, Javascript projesi kodlarken neden yapıyoruz biz bunları diyenlerin veya benim gibi sadece düz kod yazanların içeriye girmek istemedikleri teknolojiler diyebileceğimiz webpack ve babel konusuna değineceğim.

Hali hazırda çalıştığımız firmada bu iki teknolojiyi kullanıyoruz. Ama ben neden kullandığımızı yeni yeni anlamaya başladım.

Tek kelime ile özet

  • 1- Webpack: Modül paketleyici
  • 2- Babel: Geriye tam uyumluluk (Ben yeminli tercüman diyorum 🙂 )

Öncelikli olarak, Babel‘den bahsetmek istiyorum.


Bir önceki blogumda Vanilla.js olarak bahsettiğim pure javascript teknolojisini kodlayan mühendislerin uydukları belli standartlar var.

Bu standart bir kuruluş aslında ve onların adı da EcmaScript.

Bu geliştiriciler javascript yazım kurallarını belirliyorlar. Bunu standart hale getirip, javascript yazan herkesin aynı dili konuşması için çaba sarf ediyorlar. Aynı zamanda pure javascript kısmını da geliştirip yeni özellikler sunuyorlar. Tamamen open source ve ücretsiz. Tam olarak amme hizmeti 🙂

Şu an da en güncel versiyon ES6, yani bence en son orada kaldılar 🙁

Çünkü her sene bir versiyon çıkma kararı verdiler. Şu an ES8 de 2017 yılında çıkmış gözüküyor. Ama ES5 => ES6 geçişi gibi sansasyonel bir etki yapmadı.

Tamam tamam, hadi anlattın. Babel bu işin neresinde?

Şimdi Babel tam olarak şöyle bir iş yapıyor.

Javascript kodları browserlarımız ile konuşuyorlar. Anlaştıkları seviye de biz de ekranda görüyoruz. Ama bu javascript motorlarına(başka blog da değinmek istiyorum) güncelleme gelmeden, javascript kullanıcıları yeni versiyon çıkartırlar ise ne olur?

Cevap basit: Yeni versiyonla kodlanan javascript kodları eski tarayıcılarda çalışmaz.

Burada devreye Babel giriyor. Ve ES6 ile yazılmış kodları browserin desteklediği ES5 kodlarına çeviriyor. ES5 olmak zorunda değil. Browserın hangi versiyonu desteklediğini tespit ederek o standarta çeviriyor. Aşağıda Babel’in sol tarafa yazdığım ES6 kodunu sağ tarafa ES5 olarak çeviriyor. Yani tam anlamıyla yeminli tercümanlık yapıyor.

ES6 convert to ES5 with Babel

Browserların desteklediği Javascript versiyonları aşağıda..

Şu an da biz firma içerisinde React.JS ile kod geliştiriyoruz ve ES5 ile yazdığımız kısımlar oldu. Ama ES6 bu işin şifresini çözmüş. ES6 ile yazılan kodun browser da desteklememesi hayal kırıklığı olur.

Javascript frameworklerine de babel paketini eklememiz gerekiyor.

npm install babel-cli babel-core --save-dev

Artık gerisini babel halleder. Babel’i geliştiren yazılımcılara teşekkür ediyor ve Webpack kısmına geçiyoruz.

Webpack(kıymetlimiss) bir modül paketleyici. O ne demek?

Bizim yazdığımız onlarca javascript, css dosyalarını resimleri videoları fontları yani neredeyse bizim javascript yazarken kullandığımız bütün ekleri düzenler, karıştırır, birleştirir, çalışır hale getirir.

Buna ne gerek var?

Düşünün ki, çok büyük bir projeniz var. Bir sürü js dosyalarınız var. Ve biri diğerini, diğerini öbürü, öbürünü de öteki çağırıyor. Bunlar da belli çıktılar üretip HTML olarak gösteriyor. Ha bu arada CSS dosyaları da yükleniyor. Bu arada tarayıcının önyükleme süresinin artabileceğini ve şişmiş dosya boyutları olduğunu elbette fark edeceğiz.

Tam bu sırada devreye Webpack giriyor ve kendisine gelen dağınık modülleri paketlemeye işlemi yapıyor. Sadece bu işe mi yarıyor? Hayır aynı zamanda anlık olarak bu paketlenen dosyaları sanal olarak bize sunuyor. Onu yapan kısım da webpack dev server paketi.

Bu kısımda geliştirme ortamında yazdığımız her kodu anlık olarak paketler ve sanal ortamda bize sunar. Bir sunucuymuş gibi davranır kodlara. Local kısmımızda bu paketlerin sorunsuz çalıştığını test edebiliriz.

Yani öyle bir paket geliştirmişler ki, yazacağınız birden fazla javascript teknolojisini alır düzenler birleştirir ve çalıştırır. Config dosyasında birkaç ayar yapmanız yeterli olacaktır.

Basit bir webpack paketi ile proje hazırlayalım. Ve adımları aşama aşama takip edelim. Bu kısımda ilham aldığım Mert Köseoğlu’nun yaptığı çalışmanın kodlarını biraz değiştirip kullanacağım.

Öncelikle bir dizin oluşturup dizine geçelim.

mkdir webpack-101 && cd webpack-101

Ardından npm init ile birlikte package.json dosyası oluşturalım.

npm init -y

Şu an da ilgili dizinde package.json dosyası otomatik olarak oluştu.
Şimdi ise, webpack paketini yükleyelim.

sudo npm install --save-dev webpack --unsafe-perm

Permission hataları verdiğinden dolayı, –unsafe-perm parametresini kullandım. Ve bu komutu yazdıktan sonra, 3 farklı dosyamız oluştu.

Şimdi projemize index.html ve src klasörü altına, ilgili js dosyalarını assets klasörünün içine de css dosyalarımızı ekleyelim. Dizinimizin son hali aşağıdaki gibidir.

domElement.js

export const domElement = document.querySelector('.w-learn');

Burada DOM kısmında bulunan ‘w-learn’ classlı item’ı seçip dışarıya aktarıyoruz.

app.js

import { domElement } from "./domElement";

domElement.textContent = "Merhaba!";

Bu kısımda ise, domElement değişkeni, domElement.js den import edilerek içeriği Merhaba olarak set ediliyor.

index.css

.w-learn{
    color:red;
  }

Css kısmında renk verme işlemi yapıyoruz.

Geldik şimdi index.html dosyamızı oluşturmakta. Burada önemli kısım index.html dosyamıza script dosyalarımızı import ederken, bundle.js üzerinden paketleyerek import edeceğimizi söylememiz.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Webpack-101</title>
  <link rel="stylesheet" href="assets/index.css">
</head>
<body>
  <h1 class="w-learn"></h1>
  <script src="dist/bundle.js" charset="utf-8"></script>
</body>
</html>

Şimdi webpack ayarlarını yapacağız. İlk komutumuz ile oluşturduğumuz package.json dosyasını güncelleyeceğiz.

"scripts": {
  "build": "webpack --entry ./src/js/app.js --output-filename ./build/bundle.js"
},

npm run build komutunu koştuğumuzda, entry olarak app.js’i al ve dışarıya dist altında bir bundle.js dosyası çıkart diyeceğiz.

Böylelikle, index.html kısmında import ettiğimiz bundle.js dosyası oluşmuş olacak.

Dosyalarımız üstteki hali alacaktır. Aynı zamanda,

Hash: c0982b3305024dc5deec
Version: webpack 4.36.1
Time: 300ms
Built at: 07/20/2019 5:18:43 PM
            Asset        Size  Chunks             Chunk Names
./build/bundle.js  1010 bytes       0  [emitted]  null
Entrypoint null = ./build/bundle.js
[0] ./src/app.js + 1 modules 142 bytes {0} [built]
    | ./src/app.js 80 bytes [built]
    | ./src/domElement.js 62 bytes [built]

çıktısını verecektir.

Ve projeyi ayağa kaldırdığımızda aşağıdaki görüntüyü verecektir.

Ve gördüğünüz üzere webpack şu an sadece js dosyalarını paketledi ve bir bundle.js olarak sundu. Boyutları biraz yüksek kaldı gibi. Sıkıştırmak istersem ne yapacağım?

"scripts": {
  "build": "webpack --entry ./src/js/app.js --output-filename ./build/bundle.js -p"
}

package.json da güncellediğimiz koda -p parametresini ekliyoruz ve sıkıştırıyoruz. Tekrar çalıştırdıktan sonra boyutun azaldığını göreceksiniz. Şimdi webpack-dev-server paketini ekleyip revizyon yapalım.

sudo npm install --save-dev webpack-dev-server --unsafe-perm

Ve package.json kısmımızı, tekrar güncelliyoruz.

"scripts": {
  "build": "webpack-dev-server --entry ./src/js/app.js --output-filename ./build/bundle.js -p"
}

Artık her npm run build de paketleri oluşturup localhost üzerinden ayağa kaldıracaktır.

Peki .css dosyası neden paketlenmedi? Webpack ilk varoluşunda, sadece javascript dosyalarını paketlemekte. Biz config dosyaları oluşturarak, css dosyasını da paketlemesini söyleyeceğiz.

Şimdi ana dizinimizde webpack.config.js dosyasını oluşturuyoruz.

module.exports = {
    entry: './src/app.js',
    output: {
      filename: 'bundle.js',
      path: __dirname + '/build'
    }
  }

Aslında burası package.json da yazdığımız kısmın aynısı, bunu config dosyamıza aldık. Ve package.json’u güncelliyoruz.

"scripts": {
  "build": "webpack -p"
},

Tekrar paketledi ve build klasörüne çıkarttı.

Şimdi css filelarımızı paketlemek için iki paket daha yüklememiz gerekiyor.

sudo npm install style-loader css-loader --save-dev --unsafe-perm

Artık .css dosyamızı index.html’e link vererek değil, app.js klasörüne import ederek paketleyeceğiz.

app.js

import { domElement } from "./domElement";
import '../assets/index.css'

domElement.textContent = "Merhaba!";

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Webpack-101</title>
</head>
<body>
  <h1 class="w-learn"></h1>
  <script src="build/bundle.js" charset="utf-8"></script>
</body>
</html>

Şimdi webpack.config.js dosyamızı güncelleyelim ve css importlarını gerçekleştirelim.

module.exports = {
    entry: './src/app.js',
    output: {
      filename: 'bundle.js',
      path: __dirname + '/build'
    },
    module: {
      rules: [
        {
          test: /\.css$/,
          loader: "style-loader!css-loader"
        }
      ]
    }
  }

Ve tekrar npm run build komutunu çalıştırdığımızda yeni çıktı aşağıdaki gibi olacaktır. Artık css dosyasınıda paketledi.

Hash: 5a8eefdc170517c9681d
Version: webpack 4.36.1
Time: 610ms
Built at: 07/20/2019 5:50:27 PM
    Asset     Size  Chunks             Chunk Names
bundle.js  6.9 KiB       0  [emitted]  main
Entrypoint main = bundle.js
[0] ./assets/index.css 1.06 KiB {0} [built]
[1] ./node_modules/css-loader/dist/cjs.js!./assets/index.css 168 bytes {0} [built]
[5] ./src/app.js + 1 modules 176 bytes {0} [built]
    | ./src/app.js 109 bytes [built]
    | ./src/domElement.js 62 bytes [built]
    + 3 hidden modules

Yukarıda dediğimiz gibi, imageleri fontları vs. hepsini config dosyanıza yazarak paketleyebilirsiniz. Ancak bunlar içinde bazı paketler yüklemeniz gerekebilir. Hepinize iyi kodlamalar.

Kafanızda daha iyi oturması için birkaç bağlantı paylaşıyorum.

Webpack CreateApp
Babel Generator

Uzun bir blog oldu. Umarım anladığımı doğru aktarabilmişimdir. Sorularınız veya eleştirileriniz için, yorum kısmını veya about kısmında bulunan mail adresimi kullanabilirsiniz.

  1. Eline sağlık iki konu birleşince uzamış biraz weppack ayrı bir yazı olabilirmiş belki babel ın hikayesini biraz daha anlata bilirdin 😘

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir