ES6 module, saya yakin saat ini kalian semakin sering melihat sintak semacam ini, module.exports
exports
import
pada file .js
alias javascript.
Padahal jika kalian pernah belajar javascript beberapa tahun yang lalu, kalian tidak menjumpai sintak-sintak seperti yang baru saya sebutkan. Itulah salah satu fitur baru di ES6, yaitu module.
Kembali ke masa sebelum ES6 muncul, ada sebuah lelucon, “rerata panjang dari sebuah program javascript hanyalah satu baru”, wah wah entah harus sedih atau tertawa. Yak, tapi memang begitulah dulu, javascript belum menjadi bahasa utama dalam pengembangan web, dulu javascript digunakan berkisar untuk validasi form, handling event, atau dengan kata lain hanya untuk mempercantik website yang sudah dibuat dengan bahasa dominan lain.
Lalu, programmer jaman now pasti sudah tahu begitu pesatnya javascript telah berkembang. Bahkan hampir-hampir semua aplikasi dikembangkan dengan javascript, website, desktop bahkan mobile apps.
Saya jadi ingat lagi sebuah quote saya lupa siapa yang mengatakan, kurang lebih bunyinya seperti ini.
“Setiap program yang bisa ditulis dengan javascript, cepat atau lambat akan ditulis dengan javascript”
Kata-kata itu telah diucapkan beberapa tahun silam, dan ternyata kini semakin terbukti. Bukan?
Untuk memfasilitasi pembuatan aplikasi dengan javascript, ES6 mengeluarkan sistem module.
Penerapan ES6 Module di kode
Module hanyalah sebuah file yang berisi kode javascript. Tidak adak keyword khusus untuk membuat module semisal module
. Tidak ada. Kita hanya buat javascript file biasa. Lalu apa bedanya?
Ada 2 perbedaan yang perlu kamu tahu:
- kode kita secara otomatis menggunakan mode strict, meskipun kita tidak secara tertulis mendeklarasikan
use strict;
di file tersebut. - kita bisa menggunakan
import
danexport
// FILE: developer.js
import { Application } from './app/';
export class Developer {
learn(topic) {
Application.addTask("Developer belajar " + topic)
}
}
export function notifyFriends(){
// lakukan sesuatu
}
Developer javascript bisa melakukan export untuk function
, class
, let
, const
, atau var
Dan seperti itu saja sebenarnya untuk memahami module di javascript. Tapi, mungkin kamu perlu beberapa contoh kode agar lebih gampang dipahami.
Aksi Module di ES6
Membuat class module dan mengexportnya
// FILE: developer.js
import { Application } from './app';
export class Developer {
learn(topic) {
Application.addTask("Developer belajar " + topic)
}
}
Contoh di atas kita melakukan export
sebuah class bernama Developer
sehingga dapat diimport dari file lain. Misal, dari file project.js
//FILE: project.js
import { Developer } from './developer'
let developer = new Developer()
developer.learn("ES6 Module")
Membuat tipe lain dan mengexportnya
export function learnEverything(){
// belajar yang diperlukan
}
export const TOPICS = ["Modules", "Constant", "Spread Operator"]
export let addTask = function(){
// lakukan sesuatu
}
export var projectInstance = new Project()
Export list
Selain dengan cara di atas untuk melakukan multiple export dari 1 file, bisa juga kita gunakan model export list. Contoh
function learnEverything(){
}
const TOPICS = ["Modules", "Constant", "Spread Operator"]
let addTask = function(){
// lakukan sesuatu
}
projectInstance = new Project()
export { learnEverything, TOPICS, addTask, projectInstance }
Dengan begitu, semua tipe yang kita export
bisa di import
dari file lain, apabila misalnya kita tidak ingin meng export
constant TOPICS dari contoh di atas, maka export paling bawah kita kecualikan TOPICS, sehingga menjadi seperti ini
export { learnEverything, addTask, projectInstance }
Export default
Sebelumnya, kita telah melihat cara melakukan export dan import. Contoh
import { learnEverything, addTask, projectInstance } from 'contoh-file-module'
Kita mengurung kurawalkan nama variable yang kita import, dan harus sama. Tapi misal kita ingin melakukan export dan import default gimana caranya? Maksudnya begini, kita ingin import default dari sebuah file. Contoh
import ApplicationProjectInstance from ‘contoh-file-module’
Kita melakukan import
dari contoh-file-module
dengan nama sembarang yaitu ApplicationProjectInstance
tapi ini akan error, karena tidak ada tipe dengan nama tersebut di file itu (lihat contoh sebelumnya, masih berkaitan) agar tidak error maka kita sedikit ubah kode export
pada contoh kode sebelumnya menjadi seperti ini
export default projectInstance
Kita kasih keyword default
dan ditujukan ke tipe variable projectInstance
sehingga jika kita melakukan import seperti ini
import ApplicationProjectInstance from ‘contoh-file-module’
Akan berhasil dan merefer ke projectInstance
pada file tersebut.
Rename import pada non-default
Misalnya kita ingin mengubah nama import
karena ada 2 fungsi dengan nama yang sama dari 2 library yang berbeda, dan kita tidak bisa mengubah source dari library tersebut. Caranya mudah kita gunakan keyword as
seperti ini
import { Header as PrimaryHeader } from 'primary-header'
import { Header as SecondaryHeader } from 'other-header'
Baiklah kurang lebih demikian, penjelasan mengenai apa itu es6 module. Semoga bermanfaat.