ESM modülleri: içe / dışa aktarma

Bir program büyüdüğünde her şeyi tek bir dosyada tutmak zorlaşır. Modern JavaScript ES modülleri (ESM) ile sorunu çözer: her dosya dışa aktarılabilen bir modüldür işlevler, sabitler, sınıflar ve diğer dosyalar bunları içe aktarabilir.

export

Herkese açık hale getirmek istediğiniz şeyi dışa aktarırsınız. İki form:

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

export const PI = 3.14159;

Veya dosyanın sonunda:

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

import

Başka bir dosyadan:

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

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

{ somma, PI } nesnesi içe aktarmak istediğiniz adların listesidir. Eşleşmeleri gerekir ihraç edilen isimler

Varsayılan dışa aktarma

Her modül, adsız bir "ana" dışa aktarıma sahip olabilir:

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

Yerel olarak adı seçerek içe aktarırsınız:

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

Yeniden adlandırma

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

Dosya başına bir "ad alanı"

Modüller yalıtılmıştır: bir dosyada bildirilen değişken genel kapsamda yer almaz. sen Başka bir yerde görünür hale getirmek için açıkça dışa aktarmanız gerekir. Bu çok büyük bir gelişme her <script>'nin window paylaştığı eski tarz JS.

Deneyin

Aşağıdaki alıştırmalarda gerçek import/export söz dizimini yazmayacaksınız — korumalı alan tek bir dosya. Bunun yerine, kodu küçük ayrı işlevler halinde düzenlemenizi isteyeceğiz. sanki her biri farklı bir dosyadaymış gibi işbirliği yapın.

Alıştırmayı gözden geçirin