[Webpack] ES6 Modules

728x90

자바스크립트의 코드를 모듈화 할 수 있는 기능

다른 파일에 있는 자바스크립트의 기능을 특정 파일에서 사용할 수 있는 것

자바스크립트는 다른 프로그래밍 언어처럼 파일 마다 변수의 유효 범위가 다른게 아니라 기본적으로 변수의 유효 범위가 전역으로 잡히기 때문에 다음과 같은 예제 페이지 로딩 시 원하는 결과를 얻지 못한다.

<!-- index.html -->
<body>
  <script src="a.js"></script>
  <script src="b.js"></script>
  <script>
    getTotal(); // 200
  </script>
</body>

// a.js
var total = 100;
function getTotal() {
  return total;
}

// b.js
var total = 200;

import

export된 변수나 함수를 {}에 선언한 뒤 해당 파일이 있는 경로를 작성한다.

import { 불러올 변수 또는 함수 이름 } from '파일 경로';

export

다른 파일에서 가져다 쓸 변수나 함수의 앞에 export라는 키워드를 붙인다.

export 변수, 함수

728x90

진서의 개발노트