search

Babel 독립형 빌드

브라우저에서 실시간 컴파일 하는 Babel

hashtag
@babel/standalone

@babel/standalonearrow-up-right은 웹 브라우저 또는 Node.js 환경에서 사용할 수 있는 Babel 독립형 빌드를 제공합니다.

hashtag
실시간 컴파일

Babel 독립형 빌드 CDN을 HTML 문서에 불러오게 되면 Babel 또는 JSX 타입(type)을 감지해 실시간으로 JS 컴파일이 진행되고, 컴파일이 완료되면 코드를 실행합니다.

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<div id="output"></div>

<!-- text/babel 타입 설정 -->
<script type="text/babel">
  // ES 6 화살표 함수(arrow function) 구문
  const getMessage = () => "안녕! Babel 😁";
  document.getElementById('output').innerHTML = getMessage();
</script>

브라우저에서 결과를 확인하면 <head> 영역에 Babel 컴파일 한 결과 코드를 살펴볼 수 있습니다.

hashtag
라이브 예제

circle-exclamation

hashtag
브라우저에서 Babel을 사용하면 경고 출력

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

제품 생산에 Babel을 사용할 경우, 일반적으로 @babel/standalone 사용은 권장되지 않습니다. 대신 Webpack 같은 Node.js에서 실행되는 빌드 시스템을 사용해 JavaScript를 사전에 컴파일 해야 합니다.

hashtag
ES 표준 모듈

ES 표준 모듈(import, export)을 지원하는 브라우저에서 모듈을 사용할 경우 type="module" 속성을 설정합니다.

Babel 독립형 빌드 또한 type 속성을 사용해 컴파일 할 코드를 감지하므로 ES 표준 모듈과 함께 사용할 수 없습니다. 이 문제는 data-type="module" 을 대신 추가 사용해 해결할 수 있습니다.

hashtag
라이브 예제

hashtag
참고

Logo@babel/standalone · Babelbabeljs.iochevron-right

PreviousBabel JavaScript 컴파일러NextBabel 노드 (Node.js) ✘

Last updated