by 이듬(E.UID)

Babel 독립형 빌드

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

@babel/standalone

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

실시간 컴파일

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 컴파일 한 결과 코드를 살펴볼 수 있습니다.

라이브 예제

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

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

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

ES 표준 모듈

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

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

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

<script type="text/babel" data-type="module" src="index.js"></script>

라이브 예제

참고

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

Last updated