JavaScript
Moduły

Składnia

• import defaultMember z „module”;
• import {memberA, memberB, ...} z 'module';
• import * jako moduł z „modułu”;
• zaimportuj {memberA jako a, memberB, ...} z „modułu”;
• import defaultMember, * jako moduł z 'module';
• import defaultMember, {moduleA, ...} z 'module';
• importować „moduł”;

Uwagi

Domyślny eksport

Oprócz nazwanych importów możesz podać domyślny eksport.

// circle.js
export const PI = 3.14;
export default function area(radius) {
    return PI * radius * radius;
}

Możesz użyć uproszczonej składni, aby zaimportować domyślny eksport.

import circleArea from './circle';
console.log(circleArea(4));

Zauważ, że domyślny eksport jest domyślnie równoważny eksportowi o nazwie o nazwie default , a importowane powiązanie ( circleArea powyżej) jest po prostu aliasem. Poprzedni moduł można napisać jak

import { default as circleArea } from './circle';
console.log(circleArea(4));

Możesz mieć tylko jeden domyślny eksport na moduł. Nazwę domyślnego eksportu można pominąć.

// named export: must have a name
export const PI = 3.14;

// default export: name is not required
export default function (radius) {  
    return PI * radius * radius;
}

Importowanie z efektami ubocznymi

Czasami masz moduł, który chcesz tylko zaimportować, aby uruchomić kod najwyższego poziomu. Jest to przydatne w przypadku wypełnień, innych globałów lub konfiguracji, która działa tylko raz po zaimportowaniu modułu.

Biorąc pod uwagę plik o nazwie test.js :

console.log('Initializing...')

Możesz użyć tego w następujący sposób:

import './test'

Ten przykład wyświetli Initializing... na konsoli.

Definiowanie modułu

W ECMAScript 6, gdy używana jest składnia modułu ( import / export ), każdy plik staje się własnym modułem z prywatną przestrzenią nazw. Funkcje i zmienne najwyższego poziomu nie zanieczyszczają globalnej przestrzeni nazw. Aby udostępnić funkcje, klasy i zmienne do importowania przez inne moduły, możesz użyć słowa kluczowego export .

// not exported
function somethingPrivate() {
    console.log('TOP SECRET')
}


export const PI = 3.14;

export function doSomething() {
    console.log('Hello from a module!')
}

function doSomethingElse(){ 
    console.log("Something else")
}

export {doSomethingElse}

export class MyClass {
    test() {}
}

Uwaga: pliki JavaScript ES5 ładowane za pomocą <script> pozostaną takie same, gdy nie będzie używany import / export .

Tylko wartości, które są jawnie eksportowane, będą dostępne poza modułem. Wszystko inne można uznać za prywatne lub niedostępne.

Zaimportowanie tego modułu dałoby (zakładając, że poprzedni blok kodu znajduje się w my-module.js ):

import * as myModule from './my-module.js';

myModule.PI;                 // 3.14
myModule.doSomething();      // 'Hello from a module!'
myModule.doSomethingElse();  // 'Something else'
new myModule.MyClass();      // an instance of MyClass
myModule.somethingPrivate(); // This would fail since somethingPrivate was not exported

Importowanie nazwanych członków z innego modułu

Ponieważ moduł z sekcji Definiowanie modułu istnieje w pliku test.js , możesz zaimportować z tego modułu i użyć jego wyeksportowanych elementów:

import {doSomething, MyClass, PI} from './test'

doSomething()

const mine = new MyClass()
mine.test()

console.log(PI)

Metoda somethingPrivate() nie została wyeksportowana z modułu test , więc próba jej zaimportowania zakończy się niepowodzeniem:

import {somethingPrivate} from './test'

somethingPrivate()

Importowanie całego modułu

Oprócz importowania nazwanych członków z modułu lub domyślnego eksportu modułu, możesz także zaimportować wszystkich członków do powiązania przestrzeni nazw.

import * as test from './test'

test.doSomething()

Wszyscy eksportowani członkowie są teraz dostępni w zmiennej test . Nieeksportowani członkowie nie są dostępni, podobnie jak nie są dostępni w przypadku importowanych nazwanych członków.

Uwaga: Ścieżka do modułu './test' jest './test' przez moduł ładujący i nie jest objęta specyfikacją ECMAScript - może to być ciąg znaków do dowolnego zasobu (ścieżka - względna lub bezwzględna - w systemie plików, adres URL do zasób sieciowy lub inny identyfikator ciągu).

Importowanie nazwanych członków za pomocą aliasów

Czasami możesz napotkać członków, którzy mają naprawdę długie nazwy, takie jak thisIsWayTooLongOfAName() . W takim przypadku możesz zaimportować członka i nadać mu krótszą nazwę do użycia w bieżącym module:

import {thisIsWayTooLongOfAName as shortName} from 'module'

shortName()

Możesz zaimportować wiele długich nazw członków w następujący sposób:

import {thisIsWayTooLongOfAName as shortName, thisIsAnotherLongNameThatShouldNotBeUsed as otherName} from 'module'

shortName()
console.log(otherName)

I na koniec możesz mieszać aliasy importu z normalnym importem członków:

import {thisIsWayTooLongOfAName as shortName, PI} from 'module'

shortName()
console.log(PI)

Eksportowanie wielu nazwanych członków

const namedMember1 = ...
const namedMember2 = ...
const namedMember3 = ...

export { namedMember1, namedMember2, namedMember3 }