JavaScript
moduler

Syntax

• importera defaultMember från 'modul';
• importera {memberA, memberB, ...} från 'modul';
• import * som modul från 'modul';
• importera {memberA som en, medlemB, ...} från 'modul';
• importera defaultMember, * som modul från 'module';
• importera defaultMember, {moduleA, ...} från 'module';
• importera 'modul';

Anmärkningar

Standardexport

Förutom namngivna import kan du tillhandahålla en standardexport.

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

Du kan använda en förenklad syntax för att importera standardexporten.

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

Observera att en standardexport implicit motsvarar en namngiven export med namnet default , och den importerade bindningen ( circleArea ovan) är helt enkelt ett alias. Den föregående modulen kan skrivas som

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

Du kan bara ha en standardexport per modul. Namnet på standardexporten kan utelämnas.

// 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;
}

Importerar med biverkningar

Ibland har du en modul som du bara vill importera så att dess toppkod körs. Detta är användbart för polyfyllningar, andra globaler eller konfiguration som bara körs en gång när din modul importeras.

Fick en fil med namnet test.js :

console.log('Initializing...')

Du kan använda det så här:

import './test'

Detta exempel kommer att skriva ut Initializing... till konsolen.

Definiera en modul

I ECMAScript 6, när modulens syntax ( import / export ) används, blir varje fil sin egen modul med ett privat namnområde. Funktioner och variabler på toppnivå förorenar inte det globala namnområdet. Om du vill exponera funktioner, klasser och variabler för andra moduler att importera kan du använda sökordet 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() {}
}

Obs: ES5 JavaScript-filer som laddas med <script> -taggar förblir desamma om de inte använder import / export .

Endast de värden som uttryckligen exporteras kommer att vara tillgängliga utanför modulen. Allt annat kan betraktas som privat eller otillgängligt.

Import av den här modulen skulle ge (antagande att det föregående kodblocket finns i 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

Importerar namngivna medlemmar från en annan modul

Med tanke på att modulen från avsnittet Definiera en modul finns i filen test.js kan du importera från den modulen och använda dess exporterade medlemmar:

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

doSomething()

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

console.log(PI)

Den somethingPrivate() metoden inte exporteras från test så försök att importera den kommer att misslyckas:

import {somethingPrivate} from './test'

somethingPrivate()

Importerar en hel modul

Förutom att importera namngivna medlemmar från en modul eller en moduls standardexport, kan du också importera alla medlemmar till ett namnområde bindande.

import * as test from './test'

test.doSomething()

Alla exporterade medlemmar är nu tillgängliga på test . Icke-exporterade medlemmar är inte tillgängliga, precis som de inte är tillgängliga med namngiven medlemsimport.

Obs: Vägen till modulen './test' löses av lastaren och omfattas inte av ECMAScript-specifikationen - det kan vara en sträng till vilken resurs som helst (en sökväg - relativ eller absolut - på ett filsystem, en URL till en nätverksresurs eller någon annan strängidentifierare).

Importerar namngivna medlemmar med alias

Ibland kan du möta medlemmar som har riktigt långa medlemsnamn, till exempel thisIsWayTooLongOfAName() . I det här fallet kan du importera medlemmen och ge den ett kortare namn att använda i din nuvarande modul:

import {thisIsWayTooLongOfAName as shortName} from 'module'

shortName()

Du kan importera flera långa medlemsnamn så här:

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

shortName()
console.log(otherName)

Och slutligen kan du blanda importalias med den vanliga medlemsimporten:

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

shortName()
console.log(PI)

Exportera flera namngivna medlemmar

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

export { namedMember1, namedMember2, namedMember3 }