0Pricing
JavaScript Academy · Pelajaran

Dasar CommonJS — require/module.exports dan exports

Pelajari CommonJS: require(), module.exports, pintasan exports, dan sedikit interoperabilitas dengan ESM

Dasar CommonJS — require/module.exports dan exports adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 3. 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 JavaScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus JavaScript Academy mencakup 3 pelajaran total.

CJS: gambaran umum

Tujuan: Baca dan tulis modul CommonJS yang kecil.

  • require() memuat modul
  • module.exports adalah objek ekspor
  • exports adalah pintasan ke objek yang sama
  • Sekilas tentang interoperabilitas ESM
Dasar CommonJS — require/module.exports dan exports — ilustrasi 1

require() — gagasan

require(path) mengembalikan objek yang diekspor modul dalam CommonJS.

// CommonJS import uses require()
const cjsExample = [
  "const math = require(\\"./math.js\\");",
  "console.log(math.sum(2, 3));"
];

console.log("require() example:");
for (const line of cjsExample) console.log(line);

// Emulate a loaded module object
const loaded = { sum: function (a, b) { return a + b; } };
console.log("emulated require sum:", loaded.sum(2, 3));
Dasar CommonJS — require/module.exports dan exports — ilustrasi 2

module.exports

Berikan sebuah nilai ke module.exports untuk mengekspornya (fungsi, objek, dan sebagainya).

// module.exports sets what the module returns
const lines1 = [
  "function greet(name) { return \\"Hi \\" + name; }",
  "module.exports = greet;"
];

console.log("module.exports example:");
for (const l of lines1) console.log(l);

// Emulate consumption
function greet(name) { return "Hi " + name; }
const api1 = greet; // like module.exports = greet
console.log("use exported fn:", api1("Ayla"));
Dasar CommonJS — require/module.exports dan exports — ilustrasi 3

Pintasan exports

exports.prop = ... boleh digunakan; jangan menetapkan ulang exports = ... karena setelah itu exports tidak lagi menunjuk ke module.exports.

// exports is a shortcut to module.exports (same object)
const lines2 = [
  "// Good: add properties",
  "exports.sum = function (a, b) { return a + b; };",
  "",
  "// Pitfall: reassigning exports breaks the link",
  "exports = function () {}; // WRONG"
];

console.log("exports shortcut:");
for (const l of lines2) console.log(l);

// Emulate good usage
const moduleObj = {};
const exportsRef = moduleObj;  // like exports === module.exports initially
exportsRef.sum = function (a, b) { return a + b; };
console.log("sum via exportsRef:", moduleObj.sum(2, 4));
Dasar CommonJS — require/module.exports dan exports — ilustrasi 4

Beberapa ekspor

Anda dapat mengekspor sebuah objek yang memuat banyak fungsi dan membacanya melalui properti.

// Export an object with multiple members
const lines3 = [
  "function add(a, b) { return a + b; }",
  "function mul(a, b) { return a * b; }",
  "module.exports = { add, mul };"
];

console.log("multiple exports object:");
for (const l of lines3) console.log(l);

// Emulate consumption
const api2 = {
  add: function (a, b) { return a + b; },
  mul: function (a, b) { return a * b; }
};
console.log("use add/mul:", api2.add(1, 2), api2.mul(2, 3));
Dasar CommonJS — require/module.exports dan exports — ilustrasi 5

Sekilas ESM ↔ CJS

Interoperabilitas (sekilas):

  • ESM yang mengimpor CJS sering menerima module.exports dari CJS sebagai ekspor bawaan.
  • Contoh: import pkg from "./cjs.js", lalu gunakan pkg.add().
  • Buat contoh tetap sederhana; hindari mencampur gaya dalam satu berkas kecuali memang diperlukan.
Dasar CommonJS — require/module.exports dan exports — ilustrasi 6

Kuis sintaks ekspor CJS

Pemeriksaan singkat: Ekspor dalam CommonJS.

Dasar CommonJS — require/module.exports dan exports — ilustrasi 7

Ringkasan

Ringkasan: Muat dengan require(), ekspor dengan module.exports, tambahkan properti melalui exports.prop, dan hindari menetapkan ulang exports. Interoperabilitas ESM sering memetakan module.exports dari CJS ke ekspor bawaan.

Dasar CommonJS — require/module.exports dan exports — ilustrasi 8

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Dasar CommonJS — require/module.exports dan exports” gratis?

Ya — teks lengkap “Dasar CommonJS — require/module.exports dan exports” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus JavaScript Academy, upgrade ke CoddyKit PRO. Kursus JavaScript Academy mencakup 3 pelajaran total.

Apa yang akan aku pelajari di “Dasar CommonJS — require/module.exports dan exports”?

Pelajari CommonJS: require(), module.exports, pintasan exports, dan sedikit interoperabilitas dengan ESM Kamu berlatih JavaScript 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 JavaScript Academy?

Tidak diperlukan pengalaman sebelumnya. JavaScript 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 2 dari 3.

Berapa lama pelajaran “Dasar CommonJS — require/module.exports dan exports” 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 JavaScript Academy ini?

Ya. Setiap pelajaran JavaScript 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

  1. Dasar ESM — import/export, default vs bernama
  2. Dasar CommonJS — require/module.exports dan exports
  3. Resolusi Modul di Node dan Bundler Peramban
← Kembali ke JavaScript Academy