[Javascript] 브라우저에서 import/export 사용하기

<!-- html -->

<script src='/path/js/code.js'></script>

위와 같이 스크립트 태그를 선언하고 사용했을 것이다.

 

script에서 지정한 js에서 import/export를 사용하기 위해서는 type='module'을 사용해야 한다.

 

<!-- html -->

<script type='module' src='/path/js/code.js'></script>

 

이제 /path/js/code에서 import/export를 사용할 수 있다.

 

사용해보기

// /path/js/lib.js

export const foo= ()=>{
  console.log('hello');
}

lib.js 파일을 만들고 위 내용을 작성한다.

 

lib.js는 script태그에 넣어주지 않아도 된다.

 

// /path/js/code.js

import {foo} from './lib.js';

foo();

/path/js/code.js에는 위와 같이 import를 사용해 lib.js에서 export한 변수를 사용할 수 있다.

 

주의

type='module'로 지정했기 때문에 전역 객체로 code.js에서 선언된 값에 접근할 수 없다.

 

예를 들어서

 

<!-- html -->

<script type='module' src='/path/js/code.js'></script>
<script>
  foo();
</script>

 

하면 foo는 undefined이므로 에러가 발생한다.

 

또한 이 기능은 es6에서 추가된 기능이기 때문에 ie11과 같은 오래된 브라우저에서는 일반 스크립트 태그와 동일하게 작동한다.

(import/export를 해석하지 못해 문법 오류가 발생한다)

 

따라서 module기능을 사용하면서 es5와 같은 하위 호환이 필요하다면,

webpack과 같은 모듈 번들러를 이용해야 한다.