[자바스크립트] module 사용법 3가지

자바스크립트의 모듈 방식에는

1. * 별칭 이용하여 JS 전부를 불러오기(all)

2. { } 안에 이름을 전부 쉼표로 이어서 가져오기

3. default 지정하기 

등 이 있다.

 

three.js에서는 대체로 1번 방식을 많이 사용하는 편이다.

 

2번 방식

index.html

<script type="module" src="student.js"></script>

teacher.js (export)

export function tset() {
  console.log("test");
}

export function cheer() {
  console.log("cheer");
}

student.js (import)

import { cheer, tset } from "./teacher.js";

function nervous() {
  tset();
  cheer();
}

nervous();

 

1번 방식 : 2번 방식에서 student.js 만 수정해주면 된다.

import * as teacher from "./teacher.js";

function nervous() {
  teacher.tset();
  teacher.cheer();
}

nervous();

 

3번 방식 : 

defualt 키워드를 함께 써주면

export default function tset() {
  console.log("test");
}

function cheer() {
  console.log("cheer");
}

import 시에 괄호를 사용하지 않아도 된다.

import tset from "./teacher.js";

function nervous() {
  tset();
}

nervous();