Apa Itu Babel Loader Javascript?
 |
| Apa Itu Babel Loader Javascript? - Belajar Babel Loader Javascript ES6 |
Apa itu babel atau babel.js? Babel adalah sebuah transpiler yang bertugas untuk merubah sintaks JavaScript modern (ES6+) menjadi sintaks yang dapat didukung penuh oleh seluruh browser.
JavaScript adalah bahasa pemrograman yang berkembang sangat pesat. Dengan komunitasnya yang sangat besar, dan tiap tahun selalu update versi yang baru.
Sayangnya perkembangan yang pesat tadi membutuhkan waktu yang lama guna untuk diadaptasi oleh browser atau Node.js. Lalu ketika kita ingin mencoba sintaks terbaru di JavaScriptm, apakah kita perlu menunggu terlebih dahulu hingga seluruh browser berhasil mengadaptasi pembaharuan tersebut? Tentunya tidak!
Dengan babel ini Anda dapat menuliskan sintaks JavaScript versi terbaru tanpa perlu khawatir memikirkan tentang apakah dukungan pada browser atau tidak. Karena babel akan mengubah sintaks atau perintah yang anda tuliskan menjadi kode yang dapat diterima browser.
Jika Anda penasaran bagaimana cara babel bekerja, babel menyediakan sebuah playground yang dapat anda manfaatkan untuk mengubah sintaks JavaScript modern (ES6+) menjadi sintaks lama. Untuk mencobanya, Anda bisa buka tautan berikut ini: https://babeljs.io/repl.
Pada playground tersebut anda juga dapat memilih preset yang anda inginkan sesuai kebutuhan. Secara default preset akan mengarah ES2015(ES6).
Anda sudah tahu sekilas tentang babel. Nah! pada webpack anda dapat juga menggunakan babel dalam bentuk loader.
Meskipun webpack secara standarnya bisa memproses berkas JavaScript tanpa perlu ada bantuan loader, namun proses tersebut tidak mengubah sintaks atau perintah yang anda tuliskan.
Yang ini mengartikan bahwa jika kita menuliskan sintaks atau perintah JavaScript modern, maka kita akan menemukannya juga pada berkas bundle.js.
Meskipun kini Google Chrome dan Mozilla Firefox sudah compatible atau mendukung penulisan sintaks ES6, namun seyogyanya kita perlu sedikit peduli terhadap dukungan browser lama seperti Internet Explorer atau browser versi lama lainnya.
Untuk mulai menggunakan babel pada webpack sebagai loader, tentunya kita perlu memasang tiga package menggunakan npm pada devDependencies.
Yang pertama package @babel/core, yang kedua babel-loader, dan yang ketiga @babel/preset-env.
- npm install @babel/core babel-loader @babel/preset-env --save-dev
Package @babel/core adalah package inti yang harus dipasang ketika anda hendak atau ingin menggunakan babel, baik pada webpack maupun tools yang lain.
Package babel-loader adalah package yang diamana diperlukan untuk menggunakan babel sebagai loader pada webpack.
Yang terakhir package @babel/preset-env adalah package preset yang diamana akan anda gunakan untuk membantu babel-loader dalam melakukan tugasnya.
@babel/preset-env adalah preset cerdas yang memungkinkan anda menggunakan sintaks JavaScript terbaru tanpa harus menetapkan secara spesifik sintaks JavaScript versi apa yang anda gunakan.
Berkas package.json akan terlihat seperti dibawah ini setelah memasang ketiga package tersebut:
- {
- "name": "webclock",
- "version": "1.0.0",
- "description": "",
- "main": "index.js",
- "scripts": {
- "build": "webpack"
- },
- "author": "",
- "license": "ISC",
- "dependencies": {
- "jquery": "^3.4.1",
- "moment": "^2.24.0"
- },
- "devDependencies": {
- "@babel/core": "^7.8.4",
- "@babel/preset-env": "^7.8.4",
- "babel-loader": "^8.0.6",
- "css-loader": "^3.4.2",
- "style-loader": "^1.1.3",
- "webpack": "^4.41.6",
- "webpack-cli": "^3.3.11"
- }
- }
Setelah anda berhasil memasang ketiga package tersebut, langkah selanjutnya anda dapat gunakan babel-loader dan preset-nya pada webpack configuration.
- const path = require("path");
- module.exports = {
- entry: "./src/index.js",
- output: {
- path: path.resolve(__dirname, "dist"),
- filename: "bundle.js"
- },
- mode: "production",
- module: {
- rules: [
- /* style and css loader */
- {
- test: /\.css$/,
- use: [
- {
- loader: "style-loader"
- },
- {
- loader: "css-loader"
- }
- ]
- },
- /* babel loader */
- {
- test: /\.js$/,
- exclude: "/node_modules/",
- use: [
- {
- loader: "babel-loader",
- options: {
- presets: ["@babel/preset-env"]
- }
- }
- ]
- }
- ]
- }
- }
Ketika anda menerapkan rule untuk berkas .js, jangan lupa untuk menetapkan properti exclude dengan nilai “/node_modules/”.
Apa artinya? Dengan menetapkan properti exclude itu berarti anda mengecualikan webpack untuk memproses berkas .js yang berada pada folder “node_modules”.
Hal ini dapat meminimalkan proses yang tidak diperlukan, sehingga mempercepat proses build pada proyek anda.
Lalu pada penerapan babel-loader juga anda dapat menggunakan properti options dengan menetapkan properti presets di dalamnya. Pada properti presets anda dapat menetapkan preset (dalam bentuk array literas) yang sudah anda pasang menggunakan npm, yaitu @babel/preset-env.
Setelah menggunakan babel loader pada webpack configuration, anda bisa coba build dan buka kembali berkas bundle.js.
Maka kode yang anda tuliskan dalam ES6 akan diubah dalam bentuk sintaks yang dapat diterima oleh seluruh browser.
Bahkan pada berkas bundle tersebut pasti sudah tidak terdapat lagi sintaks yang dituliskan menggunakan ES6.
Meskipun sintaksnya sudah diubah, proyek akan tetap berjalan dengan normal seperti biasanya.
Contohnya :
Terimakasih Semoga bermanfaat !!
Baca Juga : Apa Itu Class di Javascript? - Belajar Class di Javascript