Frontend Academy · Pelajaran

Modul: import dan export

Pisahkan kode menjadi modul ES dengan export bernama dan default, lakukan import secara selektif, serta pahami cara bundler modul menyelesaikan grafik dependensi.

Pelajaran 4 dari 413 langkah

Modul: import dan export adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 4 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.

Mengapa Modul?

Sebelum ada modul, semua JavaScript berjalan dalam lingkup global. Variabel saling bertabrakan. Urutan kode menjadi penting. Berkas harus dimuat secara berurutan. Modul ES memberikan setiap berkas lingkupnya sendiri, impor eksplisit, dan ekspor yang dapat dipangkas.

Ekspor Bernama

Ekspor nilai tertentu dengan kata kunci export. Sebuah berkas dapat memiliki banyak ekspor bernama. Pengguna dapat mengimpor tepat hal yang mereka perlukan.

// utils.js
export const PI = 3.14159;

export function add(a, b) {
  return a + b;
}

export class Vector {
  constructor(x, y) { this.x = x; this.y = y; }
}

Impor Bernama

Impor ekspor bernama dengan kurung kurawal. Anda dapat mengimpor beberapa ekspor dari satu modul dalam satu pernyataan.

import { PI, add, Vector } from './utils.js';

console.log(PI);        // 3.14159
console.log(add(2, 3)); // 5

Ekspor Bawaan

Setiap modul dapat memiliki satu ekspor bawaan — biasanya hal utama yang disediakan modul tersebut. Impor ekspor ini tanpa kurung kurawal dan berikan nama apa pun.

// Button.js
export default function Button({ label }) {
  return `<button>${label}</button>`;
}

// Importing:
import Button from './Button.js';
import MyButton from './Button.js'; // any name works

Ekspor Ulang

Sebuah modul dapat mengekspor ulang dari modul lain untuk membuat berkas agregator — satu titik masuk yang mengekspor ulang banyak hal.

// components/index.js
export { default as Button } from './Button.js';
export { default as Input } from './Input.js';
export { default as Modal } from './Modal.js';

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

Impor Ruang Nama

Impor semua hal dari sebuah modul ke dalam objek ruang nama dengan import * as name. Ini berguna ketika Anda memerlukan banyak ekspor atau ingin memperjelas asalnya.

import * as utils from './utils.js';

console.log(utils.PI);        // 3.14159
console.log(utils.add(1, 2)); // 3

Impor Khusus Efek Samping

Beberapa modul diimpor semata-mata untuk efek sampingnya (polyfill, pendaftaran penangan peristiwa). Impor modul tersebut tanpa pengikatan.

import './polyfills.js'; // runs the code, imports nothing

import() Dinamis — Pemisahan Kode

Fungsi import() dinamis mengembalikan Promise. Gunakan fungsi ini untuk memuat modul secara lambat — hanya saat diperlukan. Alat bundel secara otomatis membuat potongan terpisah untuk modul yang diimpor secara dinamis.

// Load a heavy module only when the button is clicked:
button.addEventListener('click', async () => {
  const { processFile } = await import('./fileProcessor.js');
  processFile(data);
});

import.meta

import.meta adalah objek khusus yang tersedia di dalam modul. import.meta.url adalah URL modul tersebut. Vite menggunakan import.meta.env untuk variabel lingkungan.

// Vite environment variables:
console.log(import.meta.env.VITE_API_URL);
console.log(import.meta.env.MODE); // 'development' or 'production'

Resolusi Modul

Alat bundel seperti Vite menyelesaikan modul dari sistem berkas (jalur relatif seperti './utils'), node_modules ('lodash'), atau alias jalur ('@/components' yang dikonfigurasi dalam vite.config.js).

CommonJS vs Modul ES

Node.js awalnya menggunakan CommonJS (require / module.exports). Peramban menggunakan Modul ES (import / export). Node.js modern juga mendukung Modul ES dengan type: "module" dalam package.json.

// CommonJS (Node.js, older tooling):
const fs = require('fs');
module.exports = { myFunc };

// ES Modules (modern):
import fs from 'fs';
export { myFunc };

Pemeriksaan Singkat

Apa keunggulan utama menggunakan dynamic import() dibandingkan impor statis?

Jawab di pelajaran interaktif

Ringkasan: Modul ES

Ekspor dan impor bernama digunakan untuk banyak nilai. Ekspor dan impor bawaan digunakan untuk hal utama. Ekspor ulang membuat berkas agregator. import() dinamis memungkinkan pemuatan lambat dan pemisahan kode. import.meta menyediakan metadata modul. Alat bundel menyelesaikan alias, node_modules, dan jalur relatif.

Gratis untuk memulai

Belajar HTML dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 41
Pelajaran: 163

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Modul: import dan export” gratis?

Ya — teks lengkap “Modul: import dan export” 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: import dan export”?

Pisahkan kode menjadi modul ES dengan export bernama dan default, lakukan import secara selektif, serta pahami cara bundler modul menyelesaikan grafik dependensi. 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 4 dari 4.

Berapa lama pelajaran “Modul: import dan export” 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

← Kembali ke Frontend Academy