# Babel 독립형 빌드
## @babel/standalone
[@babel/standalone](https://www.npmjs.com/package/@babel/standalone)은 웹 브라우저 또는 Node.js 환경에서 사용할 수 있는 Babel 독립형 빌드를 제공합니다.
## 실시간 컴파일
Babel 독립형 빌드 CDN을 HTML 문서에 불러오게 되면 Babel 또는 JSX 타입(type)을 감지해 실시간으로 JS 컴파일이 진행되고, 컴파일이 완료되면 코드를 실행합니다.
{% tabs %}
{% tab title="@babel/standalone CDN" %}
```markup
```
{% endtab %}
{% endtabs %}
```markup
```
브라우저에서 결과를 확인하면 \ 영역에 Babel 컴파일 한 결과 코드를 살펴볼 수 있습니다.
#### 라이브 예제
{% embed url="" %}
{% hint style="warning" %}
#### 브라우저에서 Babel을 사용하면 경고 출력
You are using the in-browser Babel transformer. Be sure to precompile your scripts for production -
제품 생산에 Babel을 사용할 경우, 일반적으로 @babel/standalone 사용은 권장되지 않습니다. 대신 Webpack 같은 Node.js에서 실행되는 빌드 시스템을 사용해 JavaScript를 사전에 컴파일 해야 합니다.
{% endhint %}
## ES 표준 모듈
ES 표준 모듈(import, export)을 지원하는 브라우저에서 모듈을 사용할 경우 `type="module"` 속성을 설정합니다.
{% tabs %}
{% tab title="ES Modules" %}
```markup
```
{% endtab %}
{% endtabs %}
Babel 독립형 빌드 또한 `type` 속성을 사용해 컴파일 할 코드를 감지하므로 ES 표준 모듈과 함께 사용할 수 없습니다. 이 문제는 `data-type="module"` 을 대신 추가 사용해 해결할 수 있습니다.
{% tabs %}
{% tab title="@babel/standalone + ES Modules" %}
```markup
```
{% endtab %}
{% endtabs %}
#### 라이브 예제
{% embed url="" %}
## 참고
{% embed url="" %}