ES+6 için Webpack ve Babel nasıl kurulur?

Photo by Maxwell Nelson on Unsplash

Webpack ve babel, modern JavaScript geliştiricileri için en önemli 2 temel araçtır. Birlikte kullanıldıklarında çok güçlü bir silaha dönüşürler. Bu yazıda webpack ve babel’ın yapılandırma işlemlerini anlatacağız.

Başlamadan önce proje için bir klasör oluşturun ve package.json dosyasını oluşturmak için komutu çalıştırın.

npm init

Webpack, modern JavaScript uygulamaları için statik bir modül paketleyicidir. Temel olarak, tüm JavaScript dosyalarınızı tek bir dosyada toplayarak birbirleri hakkında bilgi sahibi olmasını sağlar. Webpack kurmak için aşağıdaki komutu çalıştırın.

npm install webpack --save-dev

Bu komut, npm’e bir geliştirme bağımlılığı (development dependency) olarak webpack’in en son sürümünü yüklemesini söyler. Webpack yüklüyken bir webpack.config.js dosyası oluşturun. Sonra, aşağıdaki kodları kopyalayıp yapıştırn.

const path = require('path');

module.exports = {
    entry: './src/js/index.js', //location of your main js file
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/bundle.js'  // where js files would be bundled to
   }
 }

Şimdi webpack ile komut satırı üzerinden iletişim kurmanın bir yoluna ihtiyacımız var. Bunun için webpack komut satırını kullanıyoruz. Tahmin edebileceğiniz üzere, bu paketi npm ile yüklememiz gerekiyor.

npm install webpack-cli --save-dev

Ayrıca web uygulamamızı bir portta çalıştırmak için webpack-dev-server kurmamız gerekiyor. Artık html-webpack-plugin paketini kurabiliriz.

npm install webpack-dev-server html-webpack-plugin  --save-dev

Şimdi webpack.config.js dosyasını aşağıdaki gibi güncelliyoruz.

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/js/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/bundle.js'
  },
  devServer: {
    contentBase: './dist' //where contents are served from
  },
  plugins: [
    new HtmlWebpackPlugin({
       filename: 'index.html', // name of html file to be created
       template: './src/index.html' // source from which html file would be created
    })
]
}

Son olarak, package.jsondosyasındaki komutları, js dosyalarınızı aşağıdaki dev komutunu çalıştıracak şekilde değiştirin. Aşağıdaki build komutunu çalıştırmak js dosyalarınızı derler ve küçültür. Son olarak start komutunu çalıştırmak, uygulamanızı bir port üzerinden sunar.

"scripts": {
 "dev": "webpack --mode development",
 "build": "webpack --mode production",
 "start": "webpack-dev-server --mode development --open"
}
npm run dev       //running dev script
npm run build    //running build script
npm run start     //running Start script

Babel, esas olarak ECMAScript 2015+ kodunu mevcut ve eski tarayıcılarda veya ortamlarda geriye dönük olarak uyumlu bir JavaScript sürümüne dönüştürmek için kullanılan bir araç zinciridir.

Babel’ı çalıştırmak için gereken tüm ön gereksinimleri elde etmek için aşağıdaki komutları çalıştırın.

npm install @babel/core @babel/preset-env babel-loader --save-dev
npm install @babel/runtime core-js@3 --save

Şimdi, babel’ı çalıştırmak için tüm ön gereksinimlere sahibiz. Bir .babelrc dosyası oluşturun ve içine aşağıdaki kodları ekleyin.

{
"presets": [
    ["@babel/preset-env", {
        "useBuiltIns": "usage",
        "corejs": "3",
        "targets": {
            "browsers": [
                "last 5 versions",
                "ie >= 8"
            ]
        }
    }]
]
}

Son olarak, webpack.config.js dosyasını aşağıdaki gibi güncelleyin.

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
entry: './src/js/index.js',
output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/bundle.js'
},
devServer: {
    contentBase: './dist'
},
plugins: [
    new HtmlWebpackPlugin({
       filename: 'index.html',
       template: './src/index.html' 
    })
],
module: {
    rules: [
        {
            test: /\.js$/, //using regex to tell babel exactly what files to transcompile
            exclude: /node_modules/, // files to be ignored
            use: {
                loader: 'babel-loader' // specify the loader
            } 
        }
    ]
}
}

Photo by Adam Whitlock on Unsplash

Tüm bunlar yapıldıktan sonra, dev veya build komutunu çalıştırın. Ardından start komutunu çalıştırın. Webpack ve babel artık başarıyla kuruldu. Modüler programlamayı ve ayrıca uygulamanızda Es6 + sözdizimini kullanarak yazılımın keyfini çıkarın.