특정 JS파일을 다른 파일로 내보내고 불러올 수 있다.
이를 이용하면 javascript를 모듈식으로 개발할 수 있다.
<script scr='library.js'></script>
위 코드 이하에서 해당 파일의 모든 변수 꺼내 쓸 수 있음.
(제이쿼리 가져올 때랑 비슷하다고 보면 됨)
호환성 높기 때문에 FE에선 보통 이렇게 사용
(export, import는 IE 호환 X)
HTML에서 JS파일 불러올 때 아래와 같이 작성하고 시작한다.
(index.js)
<script type="module">
( 여기에 import 코드 적는다 )
<script>
export시
(library.js)
var a = 10;
export default a;
import시
불러올 때 이름은 자유롭게 지어도 됨
(index.js)
import aaaa from '/library.js';
export시
(library.js)
var a = 10;
var b = 20;
export { a, b };
import시
(index.js)
import { a, b } from '/library.js';
import {a as a1} from '/library.js'
// library.js의 a변수를 a1로 변수명 변경해 불러온다.
export시
(library.js)
var a = 10;
var b = 20;
var c = 30;
export default c;
export { a, b };
import시
defualt import변수를 가장 앞쪽에 적어줘야한다.
default 변수는 자유롭게 작명하여 불러올 수 있다.
(index.js)
import c, { a, b } from '/library.js';
- 기본
default를 제외한 해당 경로의 모든 변수가 import된다.
이때 불러온 변수들은 Module 안에 들어있다.
특정 변수 꺼내려면
Module.변수명
import * as lib from '/library.js'
console.log(lib)
console.log(lib.a)
console.log(lib.b)
- default변수도 같이 import하기
default 변수를 가장 앞 쪽에 써준다.
import c, * as lib from '/library.js'
console.log(c)
console.log(lib.a)