JavaScript
모듈

통사론

• '모듈'에서 defaultMember 가져 오기;
• 모듈 {moduleA}에서 {memberA, memberB, ...}를 가져 오십시오.
• 모듈을 'module'에서 import *;
• import {memberA as a memberB, ...} from 'module';
• defaultMember, *를 'module'의 모듈로 가져옵니다.
• import defaultMember, {moduleA, ...}에서 '모듈';
• import 'module';

비고

기본 내보내기

명명 된 가져 오기 외에도 기본 내보내기를 제공 할 수 있습니다.

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

단순화 된 구문을 사용하여 기본 내보내기를 가져올 수 있습니다.

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

기본 내보내기 이름으로 명명 된 수출에 암시 적으로 동등합니다 default 및 수입 바인딩 ( circleArea 위)는 단순히 별명입니다. 이전 모듈은 다음과 같이 작성할 수 있습니다.

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

모듈 당 하나의 기본 내보내기 만 가질 수 있습니다. 기본 내보내기의 이름은 생략 할 수 있습니다.

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

부작용으로 가져 오기

때로는 최상위 코드가 실행되도록 가져 오기만하려는 모듈이 있습니다. 이는 모듈을 가져올 때 한 번만 실행되는 폴리필, 다른 전역 또는 구성에 유용합니다.

주어진 test.js 파일 :

console.log('Initializing...')

다음과 같이 사용할 수 있습니다.

import './test'

이 예제는 Initializing... 을 콘솔에 출력 Initializing... .

모듈 정의하기

ECMAScript 6에서 모듈 구문 ( import / export )을 사용할 때 각 파일은 전용 네임 스페이스가있는 자체 모듈이됩니다. 최상위 함수와 변수는 전역 이름 공간을 오염시키지 않습니다. 다른 모듈의 함수, 클래스 및 변수를 가져 오려면 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() {}
}

참고 : <script> 태그를 통해로드 된 ES5 JavaScript 파일은 import / export 사용하지 않을 때 동일하게 유지됩니다.

명시 적으로 내 보낸 값만 모듈 외부에서 사용할 수 있습니다. 다른 모든 것은 사적이거나 접근 할 수없는 것으로 간주 될 수 있습니다.

이 모듈을 가져 오면 다음과 같이됩니다 (앞의 코드 블록이 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

다른 모듈에서 명명 된 멤버 가져 오기

Defining a Module 섹션의 모듈이 test.js 파일에있는 test.js , 해당 모듈에서 가져 와서 내 보낸 멤버를 사용할 수 있습니다.

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

doSomething()

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

console.log(PI)

somethingPrivate() 메소드가 test 모듈에서 반출되지 않았으므로 가져 오기를 시도하면 실패합니다.

import {somethingPrivate} from './test'

somethingPrivate()

전체 모듈 가져 오기

모듈 또는 모듈의 기본 내보내기에서 명명 된 멤버를 가져 오는 것 외에도 모든 멤버를 네임 스페이스 바인딩으로 가져올 수 있습니다.

import * as test from './test'

test.doSomething()

내 보낸 모든 멤버를 이제 test 변수에서 사용할 수 있습니다. 가져 오지 않은 멤버는 명명 된 멤버 가져 오기를 사용할 수없는 것과 마찬가지로 사용할 수 없습니다.

참고 : 모듈 './test' 대한 경로는 로더에 의해 해결되고 ECMAScript 사양에 포함되지 않습니다. 이는 모든 리소스에 대한 문자열 일 수 있습니다 (경로 상대 또는 절대적 - 파일 시스템에서 URL). 네트워크 자원 또는 기타 문자열 식별자).

별칭을 사용하여 명명 된 멤버 가져 오기

때로 thisIsWayTooLongOfAName() 과 같이 멤버 이름이 너무 긴 멤버가있을 수 있습니다. 이 경우 멤버를 가져 와서 현재 모듈에서 사용할 짧은 이름을 지정할 수 있습니다.

import {thisIsWayTooLongOfAName as shortName} from 'module'

shortName()

다음과 같이 긴 멤버 이름을 여러 개 가져올 수 있습니다.

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

shortName()
console.log(otherName)

마지막으로 가져 오기 별칭을 일반 구성원 가져 오기와 함께 사용할 수 있습니다.

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

shortName()
console.log(PI)

여러 명명 된 멤버 내보내기

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

export { namedMember1, namedMember2, namedMember3 }