Cara menggunakan javascript module

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:

1. kode kita secara otomatis menggunakan mode strict, meskipun kita tidak secara tertulis mendeklarasikan use strict; di file tersebut.
2. kita bisa menggunakan import dan export

// 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.

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.