Belajar Bun Dasar #5: Module System

• Mengenal ECMAScript Module (ESM)
• Menggunakan Export Default
• Menggunakan CommonJS
• Import Package dari npm
• Mengimpor File Non-JavaScript
• Struktur Folder Modular
• Kesimpulan

Halo teman-teman semuanya, pada pembahasan sebelumnya kita sudah belajar bagaimana mengatur Environment dan Configuration di Bun menggunakan file .env dan bunfig.toml. Sekarang, kita akan melanjutkan ke topik yang sangat penting dalam pengembangan aplikasi modern, yaitu Module System di Bun.

Modul adalah cara untuk memecah kode menjadi bagian-bagian kecil yang dapat digunakan kembali (reusable). Dengan sistem modul, kita bisa mengelola kode secara terstruktur, menjaga agar tidak terjadi duplikasi, dan membuat proyek lebih mudah dirawat.

Bun mendukung dua jenis sistem modul: ESM (ECMAScript Module) dan CommonJS, dengan fokus utama pada ESM karena merupakan standar modern JavaScript.

Mengenal ECMAScript Module (ESM)

Format ESM adalah sistem modul modern yang menggunakan sintaks import dan export. Bun sepenuhnya mendukung format ini tanpa konfigurasi tambahan.

Contoh membuat dua file sederhana:

• math.js

  export function tambah(a, b) {
    return a + b;
  }
  
  export function kali(a, b) {
    return a * b;
  }
  

• app.js

  import { tambah, kali } from "./math.js";
  
  console.log("Hasil penjumlahan:", tambah(5, 3));
  console.log("Hasil perkalian:", kali(4, 2));
  

Jalankan dengan perintah:

bun run app.js

Output:

Hasil penjumlahan: 8
Hasil perkalian: 8

Bun secara otomatis mengenali bahwa kita menggunakan sistem ESM, tanpa perlu menambahkan "type": "module" di package.json seperti di Node.js.

Menggunakan Export Default

Selain export biasa, kita juga dapat menggunakan export default untuk mengekspor nilai tunggal dari sebuah file.

• greet.js

  export default function greet(name) {
    return `Halo, ${name}!`;
  }
  

• app.js

  import greet from "./greet.js";
  
  console.log(greet("Santri Koding"));
  

Output:

Halo, Santri Koding!

Menggunakan CommonJS

Walaupun Bun berfokus pada ESM, ia tetap kompatibel dengan CommonJS sehingga kode lama dari Node.js tetap bisa digunakan tanpa perubahan besar.

Contoh penggunaan CommonJS:

• math.cjs

  function tambah(a, b) {
    return a + b;
  }
  
  module.exports = { tambah };
  

• app.js

  const { tambah } = require("./math.cjs");
  
  console.log("Hasil penjumlahan:", tambah(2, 5));
  

Bun akan mengenali ekstensi .cjs dan menjalankannya menggunakan loader CommonJS. Artinya, proyek lama berbasis Node.js masih bisa dijalankan di Bun tanpa masalah kompatibilitas.

Import Package dari npm

Bun juga mendukung impor package eksternal yang sudah diinstal menggunakan bun add. Sebagai contoh, kita bisa menggunakan axios seperti biasa:

bun add axios

Kemudian gunakan di dalam kode:

import axios from "axios";

async function getData() {
  const res = await axios.get("https://api.github.com/users/santrikoding");
  console.log(res.data);
}

getData();

Bun akan secara otomatis mencari modul dari node_modules dan menjalankannya seperti di Node.js.

Mengimpor File Non-JavaScript

Bun juga dapat mengimpor file non-JavaScript seperti JSON, bahkan modul CSS atau SVG dalam konteks frontend. Untuk contoh dasar, misalnya kita ingin mengimpor file JSON:

• data.json

  {
    "name": "Santri Koding",
    "language": "JavaScript"
  }
  

• app.js

  import data from "./data.json";
  
  console.log(`Belajar ${data.language} bersama ${data.name}`);
  

Output:

Belajar JavaScript bersama Santri Koding

Bun akan otomatis mengenali format JSON dan mengubahnya menjadi objek JavaScript tanpa perlu parsing manual.

Struktur Folder Modular

Dalam proyek besar, biasanya kita memisahkan file menjadi folder-folder sesuai fungsinya, misalnya:

src/
 ├─ utils/
 │   ├─ math.js
 │   └─ format.js
 ├─ config/
 │   └─ index.js
 └─ app.js

Di app.js, kita bisa mengimpor file dengan path relatif:

import { tambah } from "./utils/math.js";
import { formatTanggal } from "./utils/format.js";
import config from "./config/index.js";

Dengan sistem ini, kode menjadi lebih rapi, modular, dan mudah dirawat.

Kesimpulan

Sistem modul di Bun mendukung dua format utama, yaitu ESM dan CommonJS, dengan kompatibilitas penuh terhadap ekosistem Node.js. Kita dapat menggunakan import dan export secara langsung, mengimpor package dari npm, serta memanfaatkan JSON sebagai modul tanpa konfigurasi tambahan.

Pada artikel selanjutnya, kita akan mempelajari tentang Membuat Web Server dengan Bun (HTTP Server) untuk mulai membangun aplikasi backend sederhana menggunakan Bun.

Terima Kasih.