Modul ESM: impor / ekspor

Ketika sebuah program berkembang, menyimpan semuanya dalam satu file menjadi canggung. JavaScript modern memecahkan masalah dengan modul ES (ESM): setiap file adalah modul yang dapat diekspor fungsi, konstanta, kelas, dan file lain dapat mengimpornya.

export

Anda mengekspor apa yang ingin Anda publikasikan. Dua bentuk:

// somma.js
export function somma(a, b) {
  return a + b;
}

export const PI = 3.14159;

Atau, di akhir file:

function somma(a, b) {
  return a + b;
}
const PI = 3.14159;
export { somma, PI };

import

Dari file lain:

// app.js
import { somma, PI } from './somma.js';

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

Objek { somma, PI } adalah daftar nama yang ingin Anda impor. Mereka harus cocok dengan nama yang diekspor.

Ekspor bawaan

Setiap modul dapat memiliki satu ekspor "utama", tanpa nama:

// log.js
export default function log(msg) {
  console.log('[app]', msg);
}

Anda mengimpornya dengan memilih nama secara lokal:

import log from './log.js';
log('ciao');

Mengganti nama

import { somma as plus } from './somma.js';
export { somma as add } from './somma.js'; // re-export

Satu "namespace" per file

Modul terisolasi: variabel yang dideklarasikan dalam file tidak masuk dalam cakupan global. kamu harus mengekspornya secara eksplisit agar terlihat di tempat lain. Ini merupakan kemajuan besar JS jadul tempat setiap <script> berbagi window.

Cobalah

Dalam latihan di bawah ini Anda tidak akan menulis sintaks import/export yang sebenarnya — sandboxnya adalah satu mengajukan. Sebagai gantinya, kami akan meminta Anda untuk mengatur kode menjadi fungsi kecil yang terpisah itu berkolaborasi, seperti yang Anda lakukan jika masing-masing berada dalam file berbeda.

Tinjau latihan