module/nomodule 패턴#

babel의 문서를 읽다가 module/nomodule 패턴이라는 표현이 눈에 띄어 찾아보게되었습니다. ESM(ES Module) 지원 브라우저 를 대상으로 사용되는 vite를 사용하는 입장에서 한번쯤 마주쳤을 법한 단어인데요. 여기서 말하는 module이란 브라우저에서 사용되는 javascript module 다시 말해 ESM에 해당합니다. ESM은 2015년 발표된 ES6이 도입되면서 등장하였습니다. 때문에 해당 시점을 기준으로 이전 버전의 브라우저들이거나 이후에도 브라우저가 ESM을 지원하지 않는다면 사용할 수 없습니다.

ESM의 장점을 살려 코드를 작성하고 싶지만 ESM을 지원하지 않는 브라우저에 대한 호환성을 위해 module/nomodule 패턴이 등장하게 되었습니다.

사용법#

module/nomodule 패턴을 사용하는 방법은 간단합니다. script 태그의 속성을 통해 두 환경에서 실행되어야하는 코드를 나누어 주면 되는데요. ESM을 지원하는 브라우저에서만 실행되고자 하는 코드는 type=”module” 속성을 추가하여 등록하고, ESM을 지원하지 않는 브라우저에서 실행되는 코드는 nomodule 속성을 추가합니다. 코드로 보면 아래와 같습니다.

<!-- ESM을 지원하는 브라우저에서만 실행되는 코드 -->
<script type="module">
</script>

<!-- ESM을 지원하지 않는 브라우저에서만 실행되는 코드 -->
<script nomodule>
</script>

WHATWG 문서에서 설명하는 nomodule 속성
nomodule 속성은 모듈 스크립트를 지원하는 사용자 에이전트에서 스크립트가 실행되지 않도록 하는 부울 속성입니다. 이를 통해 아래에 표시된 대로 최신 사용자 에이전트에서 모듈 스크립트를 선택적으로 실행하고 이전 사용자 에이전트에서 클래식 스크립트를 실행할 수 있습니다. nomodule 속성은 모듈 스크립트에 지정해서는 안 됩니다(지정한 경우 무시됩니다).

활용 사례#

제가 주로 사용하는 vite에서도 구형 브라우저 지원을 위한 플러그인을 제공하는데요. 폴리필 설정도 지원하지만 주된 목적은 ESM을 지원하지 않는 브라우저를 위한 플러그인으로 위에서 설명드린 module/nomodule 패턴을 통해 구형 브라우저에서도 빌드 결과물이 실행될 수 있도록 구성해주는 역할을 합니다. 플러그인 적용 전과 후를 살펴보겠습니다.

플러그인을 적용하면 module/nomodule 패턴을 통해 레거시 브라우저에 대한 코드와 폴리필을 적용해주는 부분을 확인해볼 수 있습니다.

지금까지 module/nomodule 패턴에 대해 알아보고 실제로 어떻게 활용되고 있는지 확인해보았습니다.