Frontend Academy · Pelajaran

Modul ES: import, export, dan dynamic import

Gunakan export bernama, export default, import namespace, serta muat kode secara lazy dengan dynamic import() untuk meningkatkan performa.

Modul ES: import, export, dan dynamic import adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.

Tinjauan: Dasar-Dasar Modul ES

Modul ES memberikan scope tersendiri kepada setiap berkas. Ekspor bernama membagikan nilai tertentu; ekspor default membagikan nilai utama. Bundler atau peramban menyelesaikan impor saat pemuatan.

// Named exports
export const API_BASE = '/api/v1';
export function formatDate(d) { return d.toISOString().slice(0, 10); }

// Default export
export default class ApiClient {
  constructor(base = API_BASE) { this.base = base; }
}

Penghapusan Kode Tidak Terpakai — Mengapa Ekspor Bernama Penting

Bundler (Rollup, esbuild, Vite) menghapus ekspor yang tidak digunakan. Jika Anda hanya mengimpor { formatDate }, bundler menghapus semua hal lainnya dari bundel. Ekspor bernama memungkinkan penghapusan kode tidak terpakai; import * as utils dapat mencegahnya.

// consumers/report.js — only needs formatDate
import { formatDate } from './utils.js';
// Bundler omits API_BASE and ApiClient from this chunk

import() Dinamis — Pemuatan Sesuai Kebutuhan

import() dinamis mengembalikan Promise. Modul hanya diambil saat kode dijalankan. Bundler secara otomatis memisahkannya menjadi bagian-bagian terpisah.

// Only load the heavy charting library when needed:
const showChart = async () => {
  const { Chart } = await import('./Chart.js');
  new Chart(canvas, config);
};

btn.addEventListener('click', showChart);

Impor Dinamis dengan Penanganan Kesalahan

Bungkus impor dinamis dalam try/catch untuk menangani kegagalan jaringan atau modul yang hilang dengan baik.

try {
  const module = await import('./optional-feature.js');
  module.activate();
} catch (err) {
  console.warn('Optional feature unavailable:', err.message);
}

import.meta

import.meta berisi metadata tentang modul saat ini. Properti utama: import.meta.url (URL absolut), import.meta.env (variabel lingkungan Vite), dan import.meta.resolve().

// Get the directory of this module:
const dir = new URL('.', import.meta.url).pathname;

// Vite env vars:
const API_URL = import.meta.env.VITE_API_URL;
const isProd = import.meta.env.PROD;

Eksekusi Modul — Sekali

Modul ES dievaluasi sekali, terlepas dari berapa kali modul tersebut diimpor. Semua impor dari modul yang sama berbagi instans yang sama. Hal ini membuat modul cocok untuk singleton (penyimpanan, bus peristiwa).

// store.js — evaluated once
const state = { count: 0 };
export const increment = () => state.count++;
export const getCount = () => state.count;

// Any file that imports from store.js gets the same state instance

Dependensi Sirkular

Dua modul dapat saling mengimpor. JavaScript menanganinya, tetapi nilai mungkin belum terdefinisi saat pertama kali digunakan karena urutan evaluasi. Dalam kebanyakan kasus, susun ulang kode untuk menghindari siklus.

Impor Khusus Tipe dalam TypeScript

Gunakan import type { ... } untuk mengimpor tipe saja. Kode ini dihapus saat kompilasi dan tidak pernah muncul dalam bundel keluaran. Gunakan cara ini untuk menghindari dependensi sirkular yang disebabkan oleh referensi khusus tipe.

import type { User } from './types.js';

function greet(user: User): string {
  return `Hello, ${user.name}`;
}

Mengekspor Ulang dan Berkas Pengumpul

Berkas pengumpul mengekspor ulang dari beberapa modul sehingga membuat satu titik impor yang praktis. Berhati-hatilah saat menggunakan berkas pengumpul dalam aplikasi besar — berkas tersebut dapat menghambat penghapusan kode tidak terpakai.

// components/index.ts
export { Button } from './Button';
export { Input } from './Input';
export type { ButtonProps } from './Button';

// Consumer:
import { Button, Input } from '@/components';

Skrip type=module di Peramban

Tambahkan type="module" ke tag skrip untuk mengaktifkan sintaks modul ES secara langsung di peramban — tanpa bundler. Modul ditunda secara bawaan dan memiliki scope tersendiri.

<script type="module">
  import { greet } from './utils.js';
  greet('World');
</script>

Interoperabilitas CommonJS dan ESM

Node.js mendukung keduanya. Berkas ESM menggunakan .mjs atau menetapkan "type": "module" dalam package.json. Saat menggunakan paket CommonJS dari ESM, ekspor default adalah nilai module.exports. Bundler menanganinya secara transparan.

Pemeriksaan Singkat

Apa manfaat kinerja utama menggunakan ekspor bernama dibandingkan satu objek ekspor default?

Rangkuman: Pendalaman Modul ES

Modul dijalankan sekali; semua pengimpornya berbagi instans yang sama. Penghapusan kode tidak terpakai menghapus ekspor bernama yang tidak digunakan. import() dinamis memungkinkan pemuatan sesuai kebutuhan dan pemisahan kode. import.meta memberikan konteks modul. Berkas pengumpul memang praktis, tetapi dapat menghambat penghapusan kode tidak terpakai. Impor khusus tipe dalam TypeScript tidak menghasilkan keluaran.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Modul ES: import, export, dan dynamic import” gratis?

Ya — teks lengkap “Modul ES: import, export, dan dynamic import” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Modul ES: import, export, dan dynamic import”?

Gunakan export bernama, export default, import namespace, serta muat kode secara lazy dengan dynamic import() untuk meningkatkan performa. Kamu berlatih Frontend Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Frontend Academy?

Tidak diperlukan pengalaman sebelumnya. Frontend Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “Modul ES: import, export, dan dynamic import” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Frontend Academy ini?

Ya. Setiap pelajaran Frontend Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

Modul ES: import, export, dan dynamic import
npm dan package.json: dependensi, skrip
Vite: server pengembangan dan build
Konsep Bundling: tree shaking dan pemisahan kode

← Kembali ke Frontend Academy