브라우저에서 ESModule 사용하기

Super Simple Start to ESModules in the Browser (kentcdodds.com)

Super Simple Start to ESModules in the Browser

위 포스트의 요약본이다.

1. 인라인 스크립트로 사용하기

<script type="module">
  import {appendDiv} from './append-div.js'
  appendDiv('Hello from inline script')
</script>

2. import해서 사용하기

// script-src.js
import {appendDiv} from './append-div.js'

appendDiv('Hello from external script')

<script type="module" src="./script-src.js"></script>

 

중요 : .js 확장자 적어주기 (url에서 가져오는 경우 상관없음.)

비동기 import도 잘됨

// script-src.js
import {appendDiv} from './append-div.js'

appendDiv('Hello from external script')

import('./async-script.js').then(
  moduleExports => {
    moduleExports.go()
  },
  error => {
    console.error('there was an error loading the script')
    throw error
  },
)

url에서 가져오는것도 된다.

import * as d3 from 'https://unpkg.com/d3?module'

참고 :

<script type="module" async src="./script-src.js"></script>
<script type="module" defer src="./script-src.js"></script>

async vs defer

동적 스크립트는 async