# 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="" %}
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://yamoo9.gitbook.io/webpack/babel/babel-standalone.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.