빌드 시스템 없이 프런트엔드 자바스크립트 라이브러리 불러오기

번역, 원문

세가지 종류의 자바스크립트 파일

라이브러리가 제공할 수 있는 3가지 기본 자바스크립트 파일

• 클래식 유형. <script src>로 추가해 바로 사용할 수 있음
• ES 모듈 (다른 파일에 의존할 수 있음)
• CommonJS. 빌드 시스템 없이는 브라우저에서 사용할 수 없음

이때 라이브러리들은 빌드를 생성해 보통 npm 에 업로드한다. 이 업로드된 파일들 중에 위 세가지 유형이 포함되어있다.

정리

• 클래식 JS 파일
  • 식별 방법
    • 가이드에 CDN으로 사용하라는 메세지가 있는 경우
    • .umd.js 확장자
    • <script src> 태그에 넣어보고 작동 확인
• ES 모듈
  • 사용방법
    • 의존성이 없으면 <script type="module" src=...에 넣고 코드에서 import {...} from ... 로 불러오기
    • 의존성이 있으면 importmap을 만들고 import {...} from ... 사용
      • importmap 생성 도구로 JSPM 같은 것이 있음.
    • download-esm 사용해서 importmap 필요성 제거
    • esbuild 나 다른 ES 모듈 번들러 사용
  • 식별방법
    • import나 export 문 찾기
    • .mjs 확장자
    • package.json에서 "type": "module"
• CommonJS
  • 사용방법
    • esm.sh 사용해서 ES 모듈로 변환
    • 빌드 사용
  • 식별 방법
    • 코드에서 require()나 module.exports 찾기
    • .cjs 확장자
    • package.json에서"type": "commonjs"