Photo by Kelly Sikkema on Unsplash

Developer Tools

Babel, Webpack, Rollup Nedir ?

Babel, Webpack ve Rollup geliştirici araçlarından ve React ekosisteminde nerelerde kullanıldığından bahsedeceğim.

Javascript dilini anlatırken daha önceki yazılarımda JS bir Compile dili olmadığından bir Derleme zamanı makinenin anlayacağı kısma çevrildiğini anlatmıştık. Ufak bir özet geçelim.

Özet

JS Modüllerindeki gelişim bunu (IIFE →CJS→AMD →ES6) sağlamıştır. Node gelişimi ile birlikte geliştirilen modüllerin bir Repo da toplanıp rahatça indirilebilmesi için NPM geliştirilmiştir.

Peki bu Node modüllerini sadece Sunucu tarafında mı kullanacağız? Frontend geliştiricileri de bu kütüphanelerden nasıl faydalanabilir. Browserify , Webpack gibi araçlar çıkmış, Babel sayesinde burdaki Tarayıcı uyumsuzlukları Babel dönüştürücüsü ile çözülmeye başlanmıştır.

Webpack, Babel, SCSS vb.. preprocessor yapıları Pandora’nın kutusunu açmıştır. Biz geliştiriciler artık tarayıcının anladığı JS ve CSS seviyesinde kod yazmak zorunda kalmayacaktık. Bu gelişim aslında eskiden yaşanan bir gelişimin benzeri;

Assembly ve Makine Kodu ile yazılım geliştirmenin zorluğu, yazılımcıların daha yüksek yani geliştiricilerin anlayabileceği diller tasarlanmasına sebep olmuş yani Java, C++ olduğu gibi.

Bu özellikler şimdi JS ekosisteminde var oluyor. , Typescript, Sass dilleri kullanılabilir hale geldik. React projelerinde yer alan JSX kullanımı da bu Preprocessor sayesinde aslında arka planda React API dönüştürülerek çağrımları gerçekleştirir. Bu sayede geliştiricilerin Imperative API kullanma detaylarından soyutlayarak Declarative tanımla <MyComp> çok daha hızlı kod geliştirilebilir bir hale getirmiştir.

Büyük ekipler ile çalışırken, Backend ve API üzerinden veriler ile çalışırken Dinamik Tip (Dynamic Typing) bir dil geliştirmeler sırasında esnekliğinden dolayı birçok hataya yol açabilir. Bu nedenle çok dikkatli kullanılması gerekir.

Büyük projelerde herkesin bu dikkati gösterMemesi, projeye sonradan dahil olan, veya JS konularına hakim olmayan geliştiricilerin projede oluşturabilecekleri hataları minimize etmek için TypeScript gibi Type güvenliği sağlayan diller kullanırız.

Bundan dolayı araya bir katman daha koyarak geliştirdiğimiz kodumuzun transpile edilmesi ve yazdığımız JS kodlarında oluşacak hataları daha öncesinden tespit etmiş oluruz. Bu aşamada JS dışındaki dilleri → JS diline dönüştürecek ara transpiler ihtiyaç bulunur. Bunlardan bazıları;

• TypeScript
• Reason
• Elm
• PureScript

Yani artık yazdığımız kodlar. Typescript → EcmaScript (X version) → EcmaScript (X-n versiyon) şeklinde dönüştürücüler sayesinde tarayıcının istediği JS versiyonuna kodumuzu dönüştürebiliriz.

Compiler ve Transpiler Kavramları

Dönüştürücüleri compiler , bazende transpiler ile adlandırıyoruz. Aslında Typscript, Babel, Sass gibi dönüştürülere Transpiler deniliyor.

Bunun nedeni birbirine yakın seviyedeki dillerin bir birine dönüştürülmesi yani TypeScript → EcmaScript(JS) çıktısını geliştirici aynı şekilde okuyup anlayabildiği için bu tarz dönüştürücülere Source-to-Source Compiler deniliyor.

Compiler ise High-Level Language dediğimiz (C, C++, Java, .Net…) dillerden makinenin anlayacağı Binary dile dönüştüren dönüştürücüler için kullanılıyor. gcc gibi

Babel

Babel bir JavaScript Compiler/Transpiler bizim React veya diğer Modern Framework ile yazdığımız farklı dil syntax Browser(Tarayıcı) uyumlu hale getirir.

https://babeljs.io/

Bizim bir önceki örneğimizi incelerseniz . React Bileşenleri Oluşturmak — (NPM Publish)

Burada React projesinin tarayıcıda çalışabilecek hale gelmesi için lib altına babel’ dan geçtikten sonra atılıyor.

Aşağıdaki paketleri kuruyoruz.

npm install @babel/core @babel/preset-env @babel/preset-react --save-dev

Sonrasında root dizininde .babelrc configurasyonunu oluşturup içerisine aşağıdaki bilgileri giriyoruz.

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

Sonrasında package.json içerisine babel aracını çalıştıracak toolkiti ekliyoruz.

"scripts": {
    "build": "babel src --out-dir lib --presets=@babel/preset-env,@babel/preset-react"
  },

Webpack

Webpack bir Bundler’dır yani bizim React ve diğer Framework kaynaklarını

• Kodları (JS, TypeScript)
• CSS, SCSS v….
• Img ve Ses Dosyalarını

Farklı araçlar kullanarak yükler ve bunları paketler bu paketleri oluştururken sıkıştırma, bu kaynakların parça parça yüklenebilmesi için chunklara parçalama gibi bir çok işlemi yapar.

CRA (Create React App) ile React projesi oluştururken altıyapısında Webpack kullanır.

Next.JS ürünlerin bundle canlıya atılması için Turbopack, Rust ile güçlendirilmiş Webpack geliştirmişlerdir.

https://turbo.build/pack

Yine bizim bir önceki örneğimizi incelerseniz . React Bileşenleri Oluşturmak — (NPM Publish)

webpack aracını kullanılır hale getirmek için aşağıdaki işlemleri yaptık.

npm install webpack webpack-cli babel-loader --save-dev

Bu araç(webpack) bir takım konfigurasyon bilgisine ihtiyaç duyacaktır. Bunun için webpack.config.js dosyasını açıp aşağıdaki bilgileri giriyoruz.

const path = require('path');
module.exports = {
  mode: 'development',
  entry: './example/example.js',
  output: {
    path: path.resolve(__dirname, 'example'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
    ],
  },
};

Ve package.json içerisinde start isminde bir komut ekliyoruz. webpack çalıştırıp example bundle http-server üzerinde çalıştırmak istiyoruz.

"scripts": {
    "start": "webpack && cd example && npx http-server -c-1 --cors",
  },

Bütün bu işlemler oldukça basit bir bileşen için Webpack düşünüldüğünde aslında içerisinde bir çok parçadan oluşuyor

• Files:raw-loader ,val-loader url-loader,file-loader,ref-loader
• JSON:json-loader json5-loader cson-loader
• Transpiling:script-loader, babel-loader ,buble-loader ,traceur-loader ts-loader awesome-typescript-loader coffee-loader fengari-loader
• Templating: html-loader pug-loader markdown-loader react-markdown-loader posthtml-loader handlebars-loader markup-inline-loader twig-loader
• Styling:style-loader css-loader less-loader sass-loader postcss-loader stylus-loader
• Linting and Testing: mocha-loader, eslint-loader, jshint-loader, jscs-loader, coverjs-loader
• Frameworks:vue-loader,polymer-loader, vue-loader

Not: Konu hakkında başlangıç seviyesi Webpack kullanmak Webpack’e Başlangıç blog yazısını okuyabilirsiniz.

Rollup

Rollup yine bir module bundler fakat Webpack farklı olarak daha fazla JS dosyalarını optimize bir şekilde bundle etme üzerine odaklanmış bir bundler, Örneğin React ve diğer framework oluşturan Vite altyapısında bundle işlemleri için Rollup kullanıyor.

https://rollupjs.org/

Okumaya Devam Et 😃

Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.