JavaScript 모듈

모듈（Modules）

JavaScript 모듈은 코드를 단일 파일로 분할할 수 있게 합니다.

이는 코드 라이브러리를 유지 관리하기 쉽게 합니다.

모듈은 import 문장을 외부 파일에서 가져오는 데 의존합니다.

모듈은 <script> 태그에서 type="module"。

인스턴스

<script type="module">
import message from "./message.js";
</script>

직접 시도해 보세요

내보내기

가함수또는변수모듈은 어떤 외부 파일에 저장할 수 있습니다。

내보내기는 두 가지 유형이 있습니다：이름 지정된 내보내기와기본 내보내기。

이름 지정된 내보내기（Named Exports）

让我们创建一个名为 person.js의 파일을 만들고, 그 안에 우리가 내보내고 싶은 내용을 채우겠습니다.

이름 지정된 내보내기를 생성하는 방법이 두 가지 있습니다. 하나는 단일 내장 생성이고, 다른 하나는 파일 하단에 한 번에 모두 생성하는 것입니다.

단일 내장 생성하다：

person.js

export const name = "Bill";
export const age = 19;

파일 하단에 한 번에 생성하다：

person.js

const name = "Bill";
const age = 19;
export {name, age};

기본 내보내기（Default Exports）

다른 이름을 가진 message.js 파일을 생성하고 기본 수출을 보여주도록 하겠습니다.

한 파일에 단일 기본 수출만 있을 수 있습니다.

인스턴스

message.js

const message = () => {
const name = "Bill";
const age = 19;
return name + ' is ' + age + 'years old.';
};
export default message;

导入

모듈을 파일에导入하는 방법은 그들이 이름 수출인지 기본 수출인지에 따라 달라집니다.

이름 수출은 괄호로 구성된 것입니다. 기본 수출은 아닙니다.

이름 수출에서 가져오기

파일 person.js에서 이름 수출 가져오기:

import { name, age } from "./person.js";

직접 시도해 보세요

기본 수출에서 가져오기

파일 message.js에서 기본 수출 가져오기:

import message from "./message.js";

직접 시도해 보세요

주의

모듈은 HTTP(s) 프로토콜에만 적용됩니다.

file:// 프로토콜로 열린 웹 페이지는 가져오기/내보내기를 사용할 수 없습니다.