폭간의 기술블로그 HomeArchivesTagsCategories
es6 import 구문
|javascript|

JavaScript import 구문

자바 스크립트에도 import 구문이 들어 왔다.

아래는 Syntax 이다

정적 import 문은 다른 모듈에서 내 보낸 바인딩을 가져 오는 데 사용됩니다.
가져온 모듈은 귀하가 그러한 모듈을 선언했는지 여부와 관계없이 엄격 모드입니다.
import 문은 포함 된 스크립트에서 type = “module”이 아닌 한 사용할 수 없습니다.

위에 부분에서 한참을 헤매었다.

type = “module”의 스크립트를 필요로하지 않는 함수와 같은 동적 import ()도 있습니다.
이전 버전과의 호환성은 script 태그의 속성 nomodule을 사용하여 보장 할 수 있습니다.

동적 가져 오기는 모듈을 조건부로 로드하거나 필요에 따라로드하려는 경우에 유용합니다.
정적 양식은 초기 종속성을로드하는 데 바람직하며 정적 분석 도구와 트리 떨림에서 더 쉽게 얻을 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13

import defaultExport from "module-name";
import * as name from "module-name";
import { export } from "module-name";
import { export as alias } from "module-name";
import { export1 , export2 } from "module-name";
import { foo , bar } from "module-name/path/to/specific/un-exported/file";
import { export1 , export2 as alias2 , [...] } from "module-name";
import defaultExport, { export [ , [...] ] } from "module-name";
import defaultExport, * as name from "module-name";
import "module-name";
var promise = import("module-name"); // This is a stage 3 proposal.

import 예제 구문은 

1
2
3
4
5

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

import {myExport} from '/modules/my-module.js';

모듈을 import 하기 위해선 모듈 export가 되어 있어야 된다.

그럼 export Syntax를 보면

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

// Exporting individual features
export let name1, name2, …, nameN; // also var, const
export let name1 = …, name2 = …, …, nameN; // also var, const
export function functionName(){...}
export class ClassName {...}

// Export list
export { name1, name2, …, nameN };

// Renaming exports
export { variable1 as name1, variable2 as name2, …, nameN };

// Default exports
export default expression;
export default function (…) { … } // also class, function*
export default function name1(…) { … } // also class, function*
export { name1 as default, … };

// Aggregating modules
export * from …;
export { name1, name2, …, nameN } from …;
export { import1 as name1, import2 as name2, …, nameN } from …;
export { default } from …;

사용법

1
2
3
4
5
6
7
8
9
10

// export features declared earlier
export { myFunction, myVariable }; 

// export individual features (can export var, let,
// const, function, class)
export let myVariable = Math.sqrt(2);
export myFunction() { ... };


참조

es6import