태그 보관물: export

Front-End Development

ES6 import module 브라우저 지원

댓글 남기기

지금까지 JavaScript에서 모듈화는 조금 번거로웠다.
개발자들은 각자의 방식대로 스스로 모듈 방법을 찾거나, 번들링 도구를 사용하여 모듈화를 했다.

ES6 import module 구문이 있지만 브라우저에서 지원하지 않기 때문에
사용 하려면 번들링 도구나 babel, webpack의 도움을 받아야 가능 했다.

하지만, 이젠 ES6 import 구문을 외부 번들링 도구 없이 가능하다.
드디어 ES6 import module 브라우저 지원 한다.  문법은 간단합니다. [데모]

<script type="module">
  import { addTextToBody } from './utils.js';

  addTextToBody('Modules are pretty cool.');
</script>

모듈을 호출하는 스크립트에 type=”module”을 작성 해줘야 한다.
물론 HTML에 inline으로 script 내용을 작성하지 않고 별도 스크립트 파일을 작성하고 호출 해도 된다.

// utils.js
export function addTextToBody(text) {
  const div = document.createElement('div');
  div.textContent = text;
  document.body.appendChild(div);
}
[옵션]
위에 설명한 기본 방법에 스크립트 호출의 defer와 async 속성을 사용 할 수 있다.
  • defer: 스크립트 호출 시점은 지연 시킨다. [데모]
  • async: 스크립트 호출시 DOM 랜더링을 Stop 시키지 않고 한다. [데모]
[지원브라우저]
  • Chrome 61 이상
  • Firefox 54 이상 (behind the dom.moduleScripts.enabled setting in about:config.)
  • Edge 16 이상
  • Safari 10.1 이상
[자세한 설명]