1. ES6에서 import&export를 이용하여 파일간 모듈식 개발 가능
<script src="library.js"></script> 는 옛날 방식, but 호환성은 그만큼 좋음
require()도 옛날 방식
// main.js
<script type="module">
import a from '/library.js';
</script>
// library.js
var a =10;
export default a;
2. export default는 파일 하나당 한번만 사용 가능
여러개 export 하려면
export {a, b, c};
이렇게 하거나
export {a};
export {b};
이렇게 하거나
export var a = 10;
이렇게 하면 됨
3. export를 여러개 하는 파일을 import할 때에는 export 변수명과 똑같이 맞춰서 써주어야 함.
똑같이 맞추는 게 기존이지만 이름을 재지정해줄 수 있음
import {a as myA} from '/library.js';
4. export로 여러 개 변수를 내보내고 export default 하나만 딱 사용하는 건 가능
export {a, b} -> import {a} from '/library.js';
export default c -> import myC from '/library.js';
export한 변수들을 모두 쓰려면
import myC, {a, b} from '/library.js';
5. 전부 다 import 하는 문법이 따로 있음
import * as myAll from '/library.js';
console.log(myAll.a);
console.log(myAll.b);
export default 변수는 * 문법으로 커버가 안되서 직접 써주어야 함
import myC, * as myAll from '/library.js';
console.log(myC);
반응형
'Knowledge Wiki > Javascript' 카테고리의 다른 글
[ JavaScript ES 6 ] 비동기식 처리 (0) | 2021.12.17 |
---|---|
[ JavaScript ES 6 ] 웹브라우저 동작 원리 (0) | 2021.12.17 |
[ JavaScript ES 6 ] Destructuring (0) | 2021.12.17 |
[ JavaScript ES 6 ] getter, setter (0) | 2021.12.16 |
[ JavaScript ES 6 ] 상속 (0) | 2021.12.16 |