> For the complete documentation index, see [llms.txt](https://yamoo9.gitbook.io/learning-react-app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://yamoo9.gitbook.io/learning-react-app/learning-history/from-pure-dev-to-react/babel-stand-alone.md).

# Babel 독립형 빌드

[@babel/standalone](https://babeljs.io/docs/en/babel-standalone)은 브라우저 환경에서 Babel JavaScript 컴파일러를 사용해 실시간 빌드하는 독립형 도구입니다.

## Babel Standalone CDN

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

{% tabs %}
{% tab title="index.html" %}

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

{% endtab %}
{% endtabs %}

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

{% tabs %}
{% tab title="index.html" %}

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

{% endtab %}
{% endtabs %}

![](https://597303073-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MUfqhMWK9ILIx0SXJTa%2F-MUp3lB_P-FQp71Kohza%2F-MUp8VlKS2w3pTq0OpYg%2Fimage.png?alt=media\&token=af58b1bb-bcf8-4614-80ae-10ffba0d8a50)

{% hint style="warning" %}

#### 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에서 실행되는 빌드 시스템을 사용해야 합니다.
{% endhint %}

## Babel은 모듈 번들러가 아닙니다. <a href="#babel-is-not-module-bundler" id="babel-is-not-module-bundler"></a>

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

{% tabs %}
{% tab title="index.html" %}

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

{% endtab %}
{% endtabs %}

{% hint style="success" %}
Babel CLI 컴파일 구성은 [Webpack 빌드 환경에 Babel 로더 설정](/learning-react-app/learning-history/from-pure-dev-to-react/react-app-on-the-build-envrionment.md#config-babel-loader) 실습으로 대체합니다.
{% endhint %}