Memulai Babel dan Webpack

Perkembangan dunia web development memang begitu pesat akhir akhir ini. Kemunculan node js dan ecmascript2015 menjadi faktor utama dibalik perkembangan javascript. Banyak sekali kilauan teknologi baru bermuncul di web development.

Beberapa diantaranya adalah Babel dan Webpack. Kedua istilah ini biasanya dipakai untuk mengoptimasi kode-kode javascript kita agar lebih efisien untuk production nantinya.

Eh tunggu dulu, udah kenal babel belum? Atau webpack? Sedikit saya jelaskan, Babel sendiri merupakan sebuah kompiler untuk javascript untuk versi Ecmascript 2015+ atau es6 keatas agar bisa dijalankan di browser yang belum menyesuaikan dengan standart Es6 ini. Kata lainnya browsernya belum update.

Baca juga : Berkenalan Dengan EcmaScript 6

Atau sengaja saya kutip dari wikipedia, “Babel adalah kompiler JavaScript sumber terbuka dan gratis yang terutama digunakan untuk mengubah kode ECMAScript 2015+ menjadi versi JavaScript yang kompatibel dengan yang dapat dijalankan oleh mesin JavaScript yang lebih lama”.

Lalu apa lagi Webpack?

Kita dongeng sedikit, mungkin para developer javascript sedikit kesal jika saat development melihat banyak sekali file js yang berandakan. Belum lagi waktu upload ke production, syukur-syukur internet cepat, kalau lelet. Pusing sendiri.. Udah file banyak, internet lemot.. naik naikin emosi.. eh kok curhat..

Nah, dari permasalahan ini lah kemudian webpack data memberi solusi.. Alhamdulillah… Jadi si webpack akan membundle seluruh kode javascript (dan file lainnya) kedalam satu file saja yang menjadi file productionnya.

Jadi jangan heran waktu view source kode web, kita kadang berjumpa hanya ada satu file javascript saja padahal fitur nya banyak.

Secara teoritis gini, Webpack merupakan sebuah module bundler berbasis javascript yang difungsikan untuk membundle seluruh file front-end (html, js, css, gambar) menjadi sebuah file static yang nantinya akan diupload ke production.

Step Instalasi

Langkah awal untuk memakai babel atau javascript, tentu harus punya node js dan npm. Pastikan keduanya sudah terinstall di komputer kalian.

Jika belum download dan install, silahkan cek di webnya langsung https://nodejs.org/en/download/

Setelah diinstall silahkan buat folder tempat kita akan koding, silahkan terserah saja, disini saya memberi nama belajar-babel-webpack dan buka di text editor.

Selanjutnya silahkan buka terminal dan arahkan ke folder yang baru dibuat tadi dan inisialisasi projek kita. Step ini akan menghasilkan satu file baru bernama package.json

npm init

Dan berikut file package.json saya

 {
  "name": "belajar-babel-webpack",
  "version": "1.0.0",
  "description": "Belajar Babel Webpack Javascript Pemula",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Azhari",
  "license": "ISC"
} 

Step selanjutnya adalah instalasi paket paket dari webpack dan babel. Paket paket nya yaitu webpack webpack-cli webpack-dev-server dan @babel/core @babel/preset-env babel-loader

Menginstal Webpack

npm install --save-dev webpack webpack-cli webpack-dev-server

Perintah diatas akan menginstal webpack yang berisi kode-kode bundler, webpack-cli untuk menjalankan webpack lewat command line, dan webpack dev server akan membaggun sebuah mini server untuk kebutuhan kita di development nanti.

Menginstal Babel

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

Sedikit informasi untuk babel 7 agak berbeda dengan versi sebelumnya, dimana untuk pake babel diganti dengan prefix @babel/ untuk setiap paketnya. Jika sebelumnya di untuk install babel core dengan babel-core . Untuk lebih memahami silahkan cek dokumentasi babel.

Paket pertama dari kode diatas adalah @babel/core yang merupakan paket utama kompiler. Untuk @babel/preset-env sendiri untuk secara otomatis akan mengatur penggunaan versi javascript terbaru dan menyesuaikan akan disesuaikan dengan environment si target. Sementara babel-loader sediri merupakan plugin babel untuk menjembatani nya dengan config webpack saat budling.

Membuat File Config

Setelah mengistall paket-paket babel dan webpack selanjutnya adalah membuat file config,

Untuk file config di babel silahkan buat file baru di root folder bernama .babelrc dan isinya sebagai berikut

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

Untuk config webpack silahkan buat file baru lagi dan di root folder juga dengan nama webpack.config.js

const path = require('path');

module.exports = {
    mode : "development",
    entry : {
        app : './src/index.js'
    },
    output : {
        path : path.resolve(__dirname, "dist"),
        filename : "app.bundle.js"
    },
    module: {
        rules : [
            {
                test: /\.js?$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ["@babel/preset-env"]
                }
            }
        ]
    }
} 

Tidak usah pusingkan seluruh isi konfigurasi diatas, karena masih tahap awal. Tapi jika ingin mendalami silahkan saja cek dokumentasi dari webpack di https://webpack.js.org/configuration/.

Tapi untuk saat ini cukup kita perhatikan dua config saja, yaitu entry – app dan output.

Untuk entri-app terdapat file index.js pada folder src. Di file inilah yang menjadi start utama dan akan di kompile menjadi sebuah file nantinya.

Hasil dari file dari kompile ini akan muncul sesuai dengan output di config kita. Di output ada dua poin, yaitu path dan filename. Path merupakan lokasi folder dari hasil kompilenya, sedangkan filename adalah nama file nya. Jadi bisa kita simpulkan setelah kompile akan terdapat file baru bernama app.bundle.js di folder dist.

Membuat File src/index.js

Realisasi dari file config tadi, silahkan buat di root folder berupa folder baru dengan nama src dan kemudian buat juga file baru dengan nama index.js

Untuk isian index.js sementara isi saja console sederhana.

let app = () => {
    console.log("Selamat belajar Javascript");
}

app(); 

Membuat File index.html

Pada root folder projek silahkan buat file baru dengan nama index.html. Tentu anda sudah faham apa gunanya, file index.html akan menjadi tampilan home page dari projek kita. Dan disini juga file bundle kita akan diload.

Berikut isi dari file index.html

 <!DOCTYPE html>
<html lang="en">
<head>
    <title>Belajar Babel Webpack Javascript</title>
</head>
<body>
    <h1>Yok belajar....</h1>

    <script src="./dist/app.bundle.js"></script>
</body>
</html> 

Saatnya bundling

Nah, jika kalian ingat diatas kita kan install webpack-dev-server, sebenarnya tanpa plugin ini pun kita tetap bisa menjalankan webpack kita, tapi saya sarankan untuk memakai plugin ini karena sangat membantu untuk development.

Untuk memakainya silahkan buka folder package.json dan sedikit modifikasi dengan menambahkan baris kode berikut tepat dibagian script.

"start": "webpack-dev-server,
"build": "webpack"

Sehingga file package.json harusnya seperti berikut ini. ( * jangan lupa komanya karena format json”

 {
  "name": "belajar-babel-webpack",
  "version": "1.0.0",
  "description": "Belajar Babel Webpack Javascript Pemula",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.7.4",
    "@babel/preset-env": "^7.7.4",
    "babel-loader": "^8.0.6",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.9.0"
  }
}

Setelah konfig tadi, waktunya mengkompile, silakan buka terminal dan posisi di root folder projek kita.

Untuk kompiling kita gunakan npm sebagai berikut

npm run build

Perintah diatas seharusnya menghasilkan sebuah folder baru bernama dist dan sebuah file di folder tersebut dengan nama app.bundle.js.

Menjalankan Di Browser

Dari hasil kompiling seharusnya kita memiliki struktur folder dan file sebagai berikut.

 - /
    - node_modules/
    - dist/
        - app.bundle.js
    - src/
        - index.js
    - .babelrc
    - index.html
    - package-lock.json
    - package.json
    - webpack.config.json 

Untuk melihat hasilnya silahkan kembali ke terminal dan kali ini kita gunakan webpack-dev-server dengan command npm run start

npm run start 

Seharusnya akan menghasilkan seperti berikut

Perhatikan pada baris Project is running at http://localhost:8080/ dan untuk melihat hasil silahkan buka browser dan ketikkan http://localhost:8080/

Dan seharusnya tampil sebagai berikut.. dan silahkan buka console dari browser dan lihat hasil kompiling dari index.js

Untuk lebih mendetail tentang hasil kompiling silahkan view source dan klik link ./dist/app.bundle.js maka anda akan menemukan kode kompiling.

Mungkin cukup sekian untuk kali ini, untuk perkembangan selanjutnya silahkan pantau saja. Jika bertemu error silahkan komen dibawah..

Terima kasih..

Soure files on github : https://github.com/azharisikumbang/belajar-babel-webpack

Azhari Sikumbang

Tulis dan bicarakan, agar lebih berguna. (Github | Linked in)
~ azhari@coretanit.com