Babel 독립형 빌드

@babel/standalone은 브라우저 환경에서 Babel JavaScript 컴파일러를 사용해 실시간 빌드하는 독립형 도구입니다.

Babel Standalone CDN

HTML 문서에서 사용할 Babel 독립형 빌드 CDN 코드를 삽입합니다.

index.html

<script src="//unpkg.com/@babel/standalone/babel.min.js"></script>

Babel이 컴파일 해야 할 스크립트 코드 임을 알려주려면 type="text/babel" 속성을 추가해야 합니다.

index.html

<script type="text/babel" src="./src/index.js" defer></script>

Babel 독립형 빌드 시, 브라우저 Console에 출력되는 경고 메시지

You are using the in-browser Babel transformer. Be sure to precompile your scripts for production - https://babeljs.io/docs/setup/

일반적으로 Babel 독립형 빌드는 사용하지 않는 것이 좋습니다. 실제 배포 환경에서 Babel을 사용할 경우 Webpack과 같은 Node.js에서 실행되는 빌드 시스템을 사용해야 합니다.

Babel은 모듈 번들러가 아닙니다.

Babel JavaScript 컴파일러는 모듈 번들러가 아니므로 ES 모듈은 호환 가능한 코드로 컴파일 할 수 없습니다. 하지만 ES 모듈을 지원하는 브라우저 만을 고려한 프로젝트라면? 다음과 같은 방법으로 모듈 파일을 사용할 수 있습니다.

index.html

<script src="//unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel" data-type="module" src="./src/index.js" defer></script>

Babel CLI 컴파일 구성은 Webpack 빌드 환경에 Babel 로더 설정 실습으로 대체합니다.