Beberapa pertanyaan yang sering muncul dari developer saat ingin mulai belajar Kotlin adalah “Apakah worth it? Apa saja keunggulannya? Mengapa kita harus mempelajarinya?.” Senada dengan itu, kali ini kita akan membahas beberapa keuntungan dan juga alasan mengapa kita harus mempelajari Kotlin.



Salah satu alasan JetBrains mengembangkan Kotlin adalah karena mereka tak puas dengan Java dan ingin meningkatkan produktivitas mereka. Seorang Java developer yang sudah mempelajari Kotlin, pasti akan membenarkan pernyataan tersebut. 
Apa pasal? Karena memang benar Java punya kekurangan pada beberapa aspek. Lalu seberapa besar pengaruh Kotlin dalam produktivitas seorang developer?
Produktivitas memang menjadi salah satu faktor penting yang menjadi alasan mengapa seorang developer harus mempelajari sebuah bahasa pemrograman. Kotlin memiliki beberapa kelebihan yang dapat meningkatkan produktivitas developer. Berikut beberapa kelebihan tersebut:
  1. Ringkas (Concise)Selain mudah dipelajari, bahasa pemrograman baru yang satu ini juga mudah untuk dituliskan. Sintaksnya pun mudah dibaca dan bisa dibilang lebih “manusiawi.” Mungkin karena penamaan fungsi di dalamnya yang mirip dengan bahasa manusia sehari-hari. Kotlin memungkinkan kita untuk mengurangi jumlah penulisan kode boilerplate. Maka jangan heran jika kita sering mendengar istilah “nicer Java”.
  2. Dapat dioperasikan secara bersilangan (Interoperable)Apakah Anda seorang Java developer yang ingin berpindah ke Kotlin? Jangan khawatir, Kotlin dan Java sama-sama berjalan di atas JVM. Alhasil, keduanya bisa dijalankan bersamaan dalam 1 (satu) proyek. Tentunya ini sangat menguntungkan. Kita tidak perlu menuliskan ulang kode Java yang sudah ada. Anda cukup menuliskan kode baru dengan Kotlin. Menariknya, selain bisa dijalankan bersamaan, fungsi yang ada pada kedua bahasa tersebut juga bisa saling diakses. Java bisa mengakses fungsi yang ada pada Kotlin. Sebaliknya, Kotlin juga bisa mengakses fungsi yang ada pada Java.
  3. Dukungan tools yang memadai (Tool-friendly)
    Membahas soal produktivitas, tentu tak jauh dari dukungan tools yang diberikan. Saat ini banyak IDE yang mendukung Kotlin. Tersedia juga https://try.kotlinlang.org yang memungkinkan Anda mencoba Kotlin secara online. Kita pun tetap bisa menggunakan command line atau terminal. Kita akan mempelajari tentang IDE dan tools lainnya pada modul terpisah.

Dengan keunggulan-keunggulan Kotlin tersebut, bisa kita simpulkan bahwa Kotlin merupakan bahasa pemrograman yang wajib kita pelajari.

Bagi seseorang yang baru mengenal pemrograman, mempelajari Kotlin bisa menjadi investasi yang baik. Dukungan multiplatform  memungkinkan kita untuk merambah ke berbagai platform. 

 Lebih lanjut, konsep OOP dan FP bisa menjadi modal utama seorang programer untuk mempelajari bahasa pemrograman lain


Read More

aplikasi mobile biasanya membutuhkan proses pengembangan yang lebih cepat.
 Selain itu, dengan begitu banyaknya tipe perangkat mobile, developer perlu memastikan bahwa aplikasinya dapat berjalan dengan baik pada semua perangkat. 

Dengan semua fitur yang Kotlin tawarkan, terpenuhilah semua kebutuhan pada pengembangan aplikasi mobile. Berikut ini adalah beberapa kelebihan mengembangkan aplikasi Android dengan Kotlin:
  • Compatibility
    Kotlin sepenuhnya kompatibel dengan JDK 6. Ini memastikan bahwa aplikasi yang dibangun dengan Kotlin dapat berjalan pada perangkat Android yang lebih lama tanpa ada masalah. Android Studio pun mendukung penuh pengembangan dengan bahasa Kotlin.
  • Performance
    Dengan struktur bytecode yang sama dengan Java, aplikasi yang dibangun dengan Kotlin dapat berjalan setara dengan aplikasi yang dibangun dengan Java. Terdapat juga fitur seperti inline function pada Kotlin yang membuat kode yang dituliskan dengan lambda bisa berjalan lebih cepat dibandingkan kode yang sama dan dituliskan dengan Java.
  • Interoperability
    Semua library Android yang tersedia, dapat digunakan pada Kotlin.
  • Compilation TimeKotlin mendukung kompilasi inkremental yang efisien. Oleh karena itu, proses build biasanya sama atau lebih cepat dibandingkan dengan Java.

Tersedia juga beberapa kumpulan tools yang membuat pengembangan aplikasi Android dengan Kotlin menjadi lebih produktif seperti:
  1. Kotlin Android ExtensionsMerupakan sebuah ekstensi yang memungkinkan Anda untuk menyingkirkan pemanggilan findViewById() saat proses binding view dalam kode Anda. Ia akan tergantikan properti yang dihasilkan oleh kompiler sintetis.
  2. AnkoSebuah library yang menyediakan kumpulan wrapper untuk API Android, serta DSL (Domain Spesific Language) yang memungkinkan Anda mengganti file .xml layout Anda dengan kode Kotlin.
  3. Android KTXAndroid KTX membuat pengembangan aplikasi Android dengan Kotlin lebih ringkas, menyenangkan, dan idiomatis berkat fitur-fitur Kotlin.

Perkembangan Kotlin pada Android pun bisa dibilang sangat cepat. Bahkan pada acara Google I/O 2019 lalu, Google mengumumkan Kotlin First!, yaitu menetapkan Kotlin sebagai bahasa pemrograman nomor 1 (satu) untuk Android. Hampir semua update pada Android saat ini sudah menggunakan Kotlin pada dokumentasinya. Tim Android juga merilis Android Jetpack yang merupakan sekumpulan library yang dapat digunakan untuk memanfaatkan fitur bahasa Kotlin dengan lebih advanced. Semua dokumentasi juga disediakan dengan sangat jelas dan lengkap pada https://developer.android.com/kotlin/ atau https://kotlinlang.org/docs/reference/android-overview.html. Tersedia juga banyak referensi yang bisa Anda gunakan untuk mulai membangun aplikasi Android dengan Kotlin. Salah satunya adalah kelas Kotlin Android Developer Expert (KADE) yang Dicoding kembangkan. Kelas KADE membantu Anda mempelajari pengembangan aplikasi Android dengan Kotlin sesuai kebutuhan industri saat in
Read More

berbagai macam aplikasi server-side, mulai dari aplikasi Web yang menampilkan halaman HTML, Backend yang menghasilkan API untuk aplikasi mobile, dan juga aplikasi yang lebih kompleks seperti Microservice. 

Semua aplikasi tersebut bisa dikembangkan menggunakan Kotlin. Selain memungkinkan kita untuk menulis kode yang ringkas dan ekspresif, 
Kotlin juga mempertahankan kompatibilitas dengan teknologi berbasis Java. Dengan membangun aplikasi server-side menggunakan Kotlin, kita akan mendapatkan beberapa manfaat, antara lain:
  • Expressiveness
    Fitur-fitur pada Kotlin seperti type-safe builder dan delegated properties akan membantu membangun abstraksi yang kuat dan mudah digunakan.
  • Scalability
    Dukungan Kotlin untuk coroutines akan membantu kita. Khususnya dalam membangun aplikasi server-side dengan skala yang besar, namun menggunakan perangkat yang sederhana.
  • Interoperability
    Kotlin sepenuhnya kompatibel dengan semua framework Java. Ini memungkinkan Anda tetap menggunakan teknologi yang sudah ada dan mulai menggunakan bahasa yang lebih modern.
  • Migration
    Kotlin mendukung proses migrasi secara bertahap, dari Java ke Kotlin. Anda dapat mulai menulis kode baru dengan Kotlin tanpa memodifikasi kode Java yang sudah ada.
  • Tooling
    Selain dukungan IDE yang powerful, Kotlin menawarkan beberapa plugin untuk framework spesifik seperti Spring.

Tersedia juga berbagai macam framework yang bisa Anda gunakan untuk mempermudah pengembangan aplikasi server-side seperti:
  1. SpringSpring merupakan sebuah framework yang sangat terkenal di Java. Spring bisa digunakan pada Kotlin untuk komunikasi ke API dengan lebih ringkas. Tersedia juga Spring Initializr yang memungkinkan kita untuk membuat proyek Spring baru dengan Kotlin.
  2. Vert.xMerupakan sebuah framework untuk membuat reactive Web app di JVM. Anda bisa melihat repository-nya di https://github.com/vert-x3/vertx-lang-kotlin.
  3. KtorKtor adalah sebuah framework yang dikembangkan oleh JetBrains untuk membuat aplikasi Web di Kotlin. Ktor memanfaatkan coroutine untuk skalabilitas yang tinggi dan menawarkan API yang mudah digunakan.
  4. Kotlinx.htmlMerupakan sebuah DSL yang dapat digunakan untuk membuat HTML di aplikasi Web. Kotlinx.html dapat digunakan sebagai alternatif untuk sistem templating tradisional seperti JSP dan FreeMarker.
  5. ExposedSebuah framework SQL yang menyediakan kumpulan DSL yang mudah dibaca untuk menggambarkan struktur database SQL dan melakukan kueri sepenuhnya dengan Kotlin.

Jelas terdapat berbagai kemudahan yang ditawarkan dan juga dukungan framework yang kuat. Para developer tak perlu ragu lagi dalam mencoba menerapkan Kotlin sebagai bahasa pemrograman untuk mengembangkan aplikasi server-side. Anda pun bisa mulai mencobanya dengan mengikuti beberapa dokumentasi berikut:
Read More


Kotlin merupakan sebuah bahasa pemrograman yang bisa ditargetkan untuk berbagai macam platform (Multiplatform) dan juga memiliki beberapa paradigma (Multiparadigm). Oleh karena itu, kita perlu tahu apa maksud dari Multiplatform dan Multiparadigm tersebut.  Mari kita bahas satu per satu. 


Multiparadigm

Mungkin sebagian dari kita masih asing dengan istilah multiparadigm di dunia programing. Menurut Wikipedia, programming paradigm adalah sebuah cara untuk mengklasifikasikan bahasa pemrograman berdasarkan fitur yang dimilikinya. 
Paradigma disini berkaitan dengan bagaimana kode dalam sebuah bahasa pemrograman diatur, seperti mengelompokkan kode atau memodifikasinya. Lebih tepatnya, seperti apa struktur kode bisa diterapkan pada bahasa pemrograman tersebut.
Terdapat beberapa paradigma yang umum dimiliki oleh sebuah bahasa pemrograman. 
Ketika kita ingin mengklasifikasikan bahasa pemrograman berdasarkan cara penulisan sintaksnya, object-oriented programming (OOP) dan functional programming (FP) merupakan 2 (dua) paradigma yang terkenal di kalangan developer. 
Dari sisi konstruksi, Kotlin sendiri mencakup keduanya. Anda bisa menggunakan gaya OOP maupun FP, bahkan mencampurnya saat menuliskan sintaks Kotlin. Dengan dukungan tinggi untuk fitur-fitur seperti higher-order function, function types, dan lambda, Kotlin adalah pilihan yang tepat untuk Anda mengeksplorasi functional programming. Hampir semua General Purpose Language sekarang sudah mendukung multiparadigm. Untuk lebih jelasnya, mari kita bahas satu per satu kedua paradigma tersebut.

Object-oriented Programming

Suatu bahasa pemrograman bisa diklasifikasikan ke dalam OOP jika data dan metode yang digunakan untuk memanipulasinya disimpan sebagai satu unit yang bisa disebut dengan objek. OOP memiliki fitur enkapsulasi yang sempurna. 
Lebih lanjut, satu-satunya cara yang bisa digunakan agar objek atau pengguna lain dapat mengakses suatu data adalah dengan metode objek. 
Dengan demikian, cara kerja suatu objek dapat diubah tanpa mempengaruhi kode lain yang menggunakan objek tersebut. 
Kotlin memberikan dukungan yang luas untuk mengembangkan program berorientasi objek. Di dalam OOP kita akan mengenal beberapa konsep seperti object, classes, properties, constructor, dll. 
Dengan OOP kita bisa memecahkan persoalan yang kompleks menjadi set yang lebih kecil dengan membuat objek. Objek tersebut memiliki 2 (dua) karakteristik utama, yaitu state (keadaan) dan behaviour (perilaku).
Kita akan membahas mengenai komponen-komponen OOP pada Kotlin secara lebih mendalam pada modul tersendiri. Sebagai pembuka, mari kita perhatikan contoh berikut:
  1. Sepeda motor adalah sebuah objek. Sepeda motor memiliki 2 (dua) roda yang mana bisa kita sebut sebagai states. Sepeda motor bisa melaju, bisa direm, bisa juga berganti gigi. Nah, ketiga hal tersebut bisa kita sebut sebagai behaviour.
  2. Kuda adalah sebuah objek. Kuda memiliki nama, warna, dan juga jenis yang mana merupakan states dari Kuda. Kuda bisa berlari, makan, dan lain sebagainya. Inilah yang kita sebut sebagai behaviour.
Sebuah objek seperti sepeda motor juga bisa memiliki objek-objek kecil di dalamnya, misalnya roda, rem, body, mesin dll. 
Semuanya bisa saling berhubungan dan berinteraksi. Selain itu, OOP juga berdasar pada konsep Message Passing, yakni sebuah tipe komunikasi antara proses dan objek. Itulah gambaran sederhana konsep OOP yang akan kita pelajari.

Functional Programming

Ada begitu banyak persepsi mengenai functional programming. Setiap persepsi tergantung siapa yang mengartikannya. Seorang F-sharp programer akan mengartikan FP sebagai apa yang ada pada F-sharp.
 Demikian halnya Swift programer akan mengartikan FP sebagai apa yang ada pada Swift. 
Namun kita bisa menyimpulkan bahwa semua bahasa pemrograman yang mendukung first-class citizen termasuk ke dalam FP. First-class citizen sendiri merupakan sebuah entitas yang mendukung semua operasi yang umumnya tersedia untuk entitas lain. 
Sebagai contoh, sebuah fungsi yang bisa dilewatkan sebagai parameter. 
Functional programming merupakan paradigma yang sedang hype di kalangan developer saat ini. 
Paradigma ini memperlakukan komputasi sebagai evaluasi fungsi matematika dan menghindari perubahan keadaan atau state dan data yang bisa berubah. Dalam FP, pemrograman dilakukan dengan expression atau declaration. 
Sehingga sebuah fungsi menghasilkan nilai yang hanya bergantung pada argumen yang diteruskan ke fungsi tersebut. 
Menghilangkan efek seperti perubahan state yang tidak tergantung pada fungsi input, dapat membuatnya lebih mudah untuk memahami dan memprediksi behaviour sebuah program. Inilah tujuan utama dari functional programming.
Masih banyak developer yang langsung membayangkan OOP ketika mendengar kata “Kotlin”. 
Padahal seperti yang telah disebutkan sebelumnya, Kotlin merupakan multiparadigm language. Kotlin memiliki beberapa fitur yang memiliki gaya functional programming, walaupun tidak sepenuhnya functional programming. 
Mengapa demikian? Sesungguhnya Kotlin adalah sebuah bahasa pemrograman berorientasi objek yang memiliki struktur fungsional. Ini artinya Kotlin juga merupakan sebuah functional programming language.
Functional programming juga bertujuan untuk mempermudah kita memahami sebuah kode. Ide dibalik FP adalah menambahkan dan mengurangi hal tertentu untuk membuat kode kita sedikit lebih mudah dipahami. 
Kotlin memiliki banyak fitur menarik yang membuatnya bisa disebut dengan functional programming seperti higher-order function, function types, extension functions, lambda, dll. 
Kita akan membahas kembali mengenai functional programming pada Kotlin dan fitur-fitur tersebut pada modul tersendiri. 

Multiplatform

20190422214347a1250a8d28b371fd02bd9744c3bda72e.pngMultiplatform berarti mendukung lebih dari 1 (satu) platform. Ketika kita membahas tentang aplikasi multiplatform, bisa dikatakan aplikasi tersebut tersedia pada lebih dari 1 (satu) platform atau bahkan bermacam-macam platform. Platform yang dimaksud misalnya Android, iOS, Web, Desktop, dsb. 

Kotlin merupakan sebuah multiplatform programming language. Kotlin bisa digunakan untuk mengembangkan aplikasi dalam berbagai platform. 

Namun sebenarnya tujuan dari multiplatform pada Kotlin sendiri tidak sekedar itu. Kotlin memiliki tujuan yang lebih penting, yaitu berbagi kode antar platform. 

Dengan dukungan untuk JVM, Android, JavaScript, iOS, Linux, Windows, macOS dan bahkan embedded system seperti STM32, Kotlin mampu mengatasi komponen apapun yang terdapat pada aplikasi modern.
Banyak developer kira multiplatform artinya membuat sebuah proyek dan langsung bisa dijalankan di atas semua platform. Tidak salah, namun tahukah Anda jika model seperti itu memiliki beberapa kekurangan? 

Sebuah aplikasi modern pasti akan membutuhkan akses ke fitur-fitur tertentu pada platform yang menjalankannya. Misalnya mengakses fitur pada ponsel seperti gyroscope, motion, GPS dan lain sebagainya. 
Melakukan hal tersebut menggunakan framework multiplatform (cross platform) tentunya tak semudah menggunakan bahasa pemrograman khusus untuk platform tertentu (Native). Misalnya Android menggunakan Java atau Kotlin dan iOS menggunakan Swift atau Objective-C. 

Belum lagi ketika membahas masalah performa, native pasti jauh lebih unggul dari cross platform.
Kotlin menawarkan konsep multiplatform yang sedikit berbeda. Dengan model code-sharing yang ada, memungkinkan Anda untuk mengelompokkan beberapa kode sesuai fungsi masing-masing. 
Sebagai contoh, membuat modul A yang berisi kumpulan kode yang dapat diakses oleh semua platform, modul B yang berisi kode spesifik untuk platform tertentu, dan modul C yang ditargetkan untuk platform tertentu namun juga memiliki ketergantungan ke modul lain.
Perhatikan diagram berikut:
20190424081620ee3b7f97811860300d8edd80c779ecb9.png

Kurang lebih seperti itulah gambaran dari modul yang bisa kita buat pada project Kotlin multiplatform. Modul tersebut dapat kita bagi menjadi 3 (tiga) bagian berikut:
  • Common ModuleModul ini berisi kode yang tidak spesifik ke platform apa pun. Kita bisa menempatkan komponen-komponen yang bisa digunakan oleh semua modul pada modul ini.
  • Platform ModulePada modul ini kita bisa menambahkan komponen tertentu yang spesifik untuk satu platform. Biasanya modul ini merupakan implementasi dari common module. 
  • Regular ModuleMerupakan modul umum yang menargetkan  platform tertentu. Modul ini bisa dependen atau pun menjadi dependensi dari platform module.
Kotlin pun telah menyiapkan beberapa library khusus untuk mendukung proyek multiplatform, di antaranya adalah HTTP, serialization dan coroutines. Semua library tersebut bisa kita terapkan pada common module dan kemudian diakses oleh modul lainnya. Anda pun tetap bisa menggunakan Kotlin standard library pada semua modul. Tentunya ini akan sangat membantu memudahkan proses pengembangan aplikasi.
Pada akademi ini kita tidak akan mempraktikkan aplikasi Kotlin Multiplatform secara langsung pada sebuah proyek. Melainkan, kita balik ke fokus awal akademi ini yaitu "Memulai Pemrograman dengan Kotlin". Jika Anda penasaran dengan implementasi Kotlin Multiplatform, Anda bisa mempelajarinya pada tautan berikut:
JetBrains juga memiliki beberapa contoh proyek yang bisa kita pelajari untuk menerapkan Kotlin Multiplatform:
Dokumentasi resmi dari Kotlin Multiplatform bisa Anda lihat pada tautan ini
Read More
20190423085926445c40dffa823c8981146f5e284052a3.jpg

Pada tahun 2010 lalu JetBrains memulai sebuah proyek open-sources baru. Proyek ini merupakan sebuah bahasa pemrograman statically typed yang menargetkan JVM, Android, JavaScript dan Native. Kotlin -nama sebuah pulau di Rusia- menjadi inspirasi oleh tim pengembang untuk ditetapkan sebagai nama bahasa pemrograman tersebut. 

Mungkin karena pulau tersebut terletak tidak jauh dari markas tim programer JetBrains, yaitu Saint Petersburg, Rusia. Bahasa Kotlin pertama kali dirilis pada bulan Februari 2016 dengan versi 1.0. Saat ini sudah mencapai versi 1.3.60 per rilis 18 November 2019. 
Di balik kemajuan pesatnya Kotlin, terdapat pengembang - pengembang hebat dan kreatif dari JetBrains. Kotlin dikembangkan oleh lebih dari 50 developer pimpinan Andrey Breslav. Mereka semua terinspirasi dari bahasa pemrograman yang sudah ada seperti Java, Scala, JavaScript, C# dan juga Groovy. Apa yang membedakan? Salah satunya, JetBrains memastikan bahwa Kotlin sangat mudah dipelajari.
Karena tergolong proyek open-sources, Kotlin dapat bebas kita gunakan secara gratis. Kotlin dikembangkan di bawah lisensi Apache 2.0 dan kode sumbernya bisa Anda akses di laman GitHub-nya. Kita pun bisa berkontribusi dengan mengirimkan pull request ke repository-nya.
Kotlin dapat digunakan untuk berbagai macam pengembangan aplikasi, baik itu server atau backend, website, maupun mobile Android. Bahkan saat ini tengah dikembangkan Kotlin/Native. Apa uniknya? Kotlin/Native memungkinkan developer untuk menggunakannya sebagai bahasa pemrograman dalam pengembangan aplikasi di platform lain seperti embedded system, desktop, macOS, dan iOS. Bahkan tak menutup kemungkinan Kotlin juga bisa digunakan untuk data science dan machine learning. Menarik, bukan?
Dukungan tools untuk Kotlin , sangat kuat. Kita bisa dengan mudah menggunakan Kotlin pada IDE seperti IntelliJ IDEA, Android Studio, Eclipse, dan NetBeans. Anda pun bisa menggunakan perintah terminal untuk mengkompilasi dan menjalankan Kotlin. Begitu pula untuk build tools. Pada JVM kita bisa menggunakan Gradle, Maven, Ant, atau Kobalt. Tersedia juga beberapa build tools yang menargetkan JavaScript.
Sebagaimana dijelaskan, kita bisa menargetkan Kotlin ke beberapa target. Kotlin akan menghasilkan bytecode yang berbeda sesuai dengan targetnya. Ketika menargetkan JVM, Kotlin akan menghasilkan bytecode yang kompatibel dengan Java. Kemudian ketika menargetkan JavaScript, Kotlin akan melakukan transpile ke ES5.1 dan menghasilkan kode yang kompatibel dengan sistem modul termasuk AMD dan CommonJS. Sedangkan untuk native, Kotlin akan menghasilkan kode yang spesifik dengan platformnya melalui LVVM.
Read More
2020031319583407bf63e74fd402a5583504377dfd8829.png

Apa itu babel atau babel.js? Babel merupakan sebuah transpiler yang bertugas untuk mengubah sintaks JavaScript modern (ES6+) menjadi sintaks yang dapat didukung penuh oleh seluruh browser.

JavaScript merupakan bahasa pemrograman yang berkembang sangat pesat. Komunitasnya besar, dan tiap tahun selalu terdapat versi yang baru. 
Namun perkembangan yang pesat tadi ternyata membutuhkan waktu yang lama untuk diadaptasi oleh browser atau Node.js. Lalu jika kita ingin mencoba sintaks terbaru di JavaScript apakah kita perlu menunggu hingga seluruh browser berhasil mengadaptasi pembaharuan tersebut? Tentu tidak! 
Dengan babel Anda dapat menuliskan sintaks JavaScript versi terbaru tanpa khawatir memikirkan dukungan pada browser. Karena babel akan mengubah sintaks yang kita tuliskan menjadi kode yang dapat diterima browser.
Jika Anda penasaran bagaimana cara babel bekerja, babel menyediakan sebuah playground yang dapat kita manfaatkan untuk mengubah sintaks JavaScript modern (ES6+) menjadi sintaks lama. Untuk mencobanya, silakan Anda buka tautan berikut: https://babeljs.io/repl.
20200313195932ff6b88f0352e20c9c08f27fd89aff700.png
Pada playground tersebut kita juga dapat memilih preset yang kita inginkan. Secara default preset akan mengarah ES2015 (ES6).
Anda sudah tahu  sekilas mengenai babel. Nah pada webpack kita juga dapat menggunakan babel dalam bentuk loader. 
Walaupun webpack secara standarnya dapat memproses berkas JavaScript tanpa perlu bantuan loader, namun proses tersebut tidak mengubah sintaks yang kita tuliskan. 
Artinya jika kita menuliskan sintaks JavaScript modern, maka kita akan menemukannya juga pada berkas bundle.js.
2020031320001286d0cce40a7f1f8ac22836dcbab4867b.png
Walaupun saat ini Google Chrome dan Mozilla Firefox sudah mendukung penulisan sintaks ES6, namun setidaknya kita perlu sedikit peduli terhadap dukungan browser lama seperti Internet Explorer atau browser versi lama lainnya.
Untuk menggunakan babel pada webpack sebagai loader, kita perlu memasang tiga package menggunakan npm pada devDependencies. 
Yang pertama package @babel/core, yang kedua babel-loader, dan yang ketiga @babel/preset-env.

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


Package @babel/core merupakan package inti yang harus dipasang ketika kita hendak menggunakan babel, baik pada webpack maupun tools yang lain.
Package babel-loader merupakan package yang diperlukan untuk menggunakan babel sebagai loader pada webpack.
Yang terakhir package @babel/preset-env merupakan package preset yang akan kita gunakan untuk membantu babel-loader dalam melakukan tugasnya. 
@babel/preset-env merupakan preset cerdas yang memungkinkan kita menggunakan sintaks JavaScript terbaru tanpa menetapkan secara spesifik sintaks JavaScript versi apa yang kita gunakan.
Berkas package.json akan tampak seperti ini setelah memasang ketiga package tersebut:

  1. {

  2.   "name": "webclock",

  3.   "version": "1.0.0",

  4.   "description": "",

  5.   "main": "index.js",

  6.   "scripts": {

  7.     "build": "webpack"

  8.   },

  9.   "author": "",

  10.   "license": "ISC",

  11.   "dependencies": {

  12.     "jquery": "^3.4.1",

  13.     "moment": "^2.24.0"

  14.   },

  15.   "devDependencies": {

  16.     "@babel/core": "^7.8.4",

  17.     "@babel/preset-env": "^7.8.4",

  18.     "babel-loader": "^8.0.6",

  19.     "css-loader": "^3.4.2",

  20.     "style-loader": "^1.1.3",

  21.     "webpack": "^4.41.6",

  22.     "webpack-cli": "^3.3.11"

  23.   }

  24. }


Setelah berhasil memasang ketiga package tersebut, langkah selanjutnya kita dapat gunakan babel-loader dan preset-nya pada webpack configuration.

  1. const path = require("path");

  2.  

  3. module.exports = {

  4.     entry: "./src/index.js",

  5.     output: {

  6.         path: path.resolve(__dirname, "dist"),

  7.         filename: "bundle.js"

  8.     },

  9.     mode: "production",

  10.     module: {

  11.         rules: [

  12.             /* style and css loader */

  13.             {

  14.                 test: /\.css$/,

  15.                 use: [

  16.                     {

  17.                         loader: "style-loader"

  18.                     },

  19.                     {

  20.                         loader: "css-loader"

  21.                     }

  22.                 ]

  23.             },

  24.             /* babel loader */

  25.             {

  26.                 test: /\.js$/,

  27.                 exclude: "/node_modules/",

  28.                 use: [

  29.                     {

  30.                         loader: "babel-loader",

  31.                         options: {

  32.                             presets: ["@babel/preset-env"]

  33.                         }

  34.                     }

  35.                 ]

  36.             }

  37.         ]

  38.     }

  39. }


Ketika menerapkan rule untuk berkas .js, jangan lupa untuk menetapkan properti exclude dengan nilai “/node_modules/”. 
Apa artinya? Dengan menetapkan properti exclude itu berarti kita mengecualikan webpack untuk memproses berkas .js yang berada pada folder “node_modules”. 
Hal ini dapat meminimalisir proses yang tidak diperlukan, sehingga mempercepat proses build pada proyek kita.  
Lalu pada penerapan babel-loader juga kita menggunakan properti options dengan menetapkan properti presets di dalamnya. Pada properti presets kita tetapkan preset (dalam bentuk array literas) yang sudah kita pasang menggunakan npm, yaitu @babel/preset-env.
Setelah menggunakan babel loader pada webpack configuration, mari kita coba build dan buka kembali berkas bundle.js. 
Maka kode yang kita tuliskan dalam ES6 akan diubah dalam sintaks yang dapat diterima oleh seluruh browser.
20200313200507f7a720e39de819c62a15f1be147aa62e.png
Bahkan pada berkas bundle tersebut dipastikan sudah tidak terdapat lagi sintaks yang dituliskan menggunakan ES6.
20200313200535f035aab9b99622b9e95be3f0d98fc827.png
Namun walaupun sintaksnya sudah diubah, proyek akan tetap berjalan normal seperti biasanya.
Contoh: 
https://github.com/dicodingacademy/a163-bfwd-labs/tree/207-webclock-webpack-using-loader
Read More

Copyright © 2017 • codehost | Designed By VeeThemes.Co.In