ES Modules: import & export

Sistem modul standar JavaScript modern: import/export, default export, top-level await, dan perbedaannya dengan CommonJS.

Part 4 dari 24 ± 30 menit Gratis

ES Modules (ESM)

ESM adalah sistem modul standar bahasa JavaScript — sama di browser dan Node. Sintaksnya memakai import dan export. Kode baru hampir selalu ditulis dengan ESM.

Mengekspor

// util.mjs
export const PI = 3.14159;                 // named export

export function lingkaran(r) {             // named export
  return PI * r * r;
}

export default function sapa(nama) {       // default export (maks. satu per berkas)
  return `Halo, ${nama}!`;
}

Mengimpor

import sapa, { PI, lingkaran } from './util.mjs';
import * as util from './util.mjs';        // semua sebagai satu objek
import { PI as pi } from './util.mjs';     // ganti nama
import fs from 'node:fs';                  // modul bawaan
import { readFile } from 'node:fs/promises';
  • Default export diimpor tanpa kurung kurawal dan boleh diberi nama bebas.
  • Named export diimpor dengan kurung kurawal dan nama harus persis.
  • Impor lokal wajib menyertakan ekstensi (./util.mjs) — beda dengan CommonJS.
  • Awalan node: pada modul bawaan (node:fs) disarankan agar jelas ia bukan paket npm.

Cara mengaktifkan ESM di Node

  • Beri ekstensi .mjs, atau
  • Tulis "type": "module" di package.json (semua berkas .js jadi ESM).

Top-level await

Di ESM, await boleh dipakai langsung di level atas modul, tanpa dibungkus fungsi async:

const data = await Promise.resolve(42);
console.log(data);

CommonJS vs ESM

CommonJSESM
Sintaksrequire() / module.exportsimport / export
PemuatanSinkron, dinamisAsinkron, statis (dianalisis sebelum dijalankan)
Ekstensi di impor lokalOpsionalWajib
__dirname, __filenameTersediaTidak ada; pakai import.meta.dirname / import.meta.url
Top-level awaitTidakYa

Mencampur keduanya

ESM dapat mengimpor paket CommonJS. Sebaliknya, require() untuk ESM baru didukung di Node versi terbaru (22.12+); sebelumnya harus memakai import() dinamis. Untuk proyek baru, pilih satu (disarankan ESM) dan konsisten.

Import dinamis

const { default: sapa } = await import('./util.mjs');   // dimuat saat dibutuhkan

Praktikkan langsung, gratis

Tulis dan jalankan kode langsung di browser, dapatkan penilaian otomatis. Daftar gratis kapan saja untuk menyimpan progres dan meraih sertifikat.

Coba latihan sekarang, tanpa daftar
Bagikan: WhatsApp Facebook LinkedIn X