> For the complete documentation index, see [llms.txt](https://yamoo9.gitbook.io/webpack/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/webpack/webpack/webpack-loaders/babel-loader.md).
# Babel 로더
## IE 웹 브라우저 대응
Button 컴포넌트를 작성하면서 사용된 코드는 ES6의 class 문법입니다. (사실 이 실습 파일의 모든 코드는 ES6입니다.) 안타깝게도 [ES6+ 코드는 IE 웹 브라우저에서 제대로 지원하지 않습니다.](https://kangax.github.io/compat-table/es6/#ie11)
그러므로 class, ES Modules 등 ES6+ 문법을 사용한 앱 코드는 모두 IE에서 제대로 작동하지 않습니다. IE에서도 ES6 문법을 사용하려면 [Babel JavaScript 컴파일러](https://babeljs.io/)를 사용해야 합니다.
## Babel + Babel Loader 구성
[@babel/core](https://www.npmjs.com/package/@babel/core), [@babel/preset-env](https://www.npmjs.com/package/@babel/preset-env), [babel-loader](https://www.npmjs.com/package/babel-loader) 패키지를 프로젝트에 설치한 후, Webpack 구성 파일의 모듈 규칙 안에 로더를 설정합니다.
{% tabs %}
{% tab title="패키지 설치" %}
```bash
npm i @babel/core @babel/preset-env babel-loader -D
```
{% endtab %}
{% tab title="webpack.config.js" %}
```javascript
module.exports = {
module: {
rules: [
// Babel 파일 로더 설정
{
test: /\.m?js$/i,
exclude: /node_modules/,
use: {
loader:'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
}
```
{% endtab %}
{% endtabs %}
{% hint style="info" %}
"exclude" 설정은 정규식과 매칭되는 디렉토리 또는 파일은 로더에 의한 번들링에서 제외됩니다.
{% endhint %}
{% hint style="info" %}
@babel/preset-env 프리셋은 Babel Foundation이 제공하는 번들로 유용한 Babel 플러그인 모음입니다. 이 프리셋을 설정하지 않으면 ES6+ 코드를 ES5로 컴파일 하지 않게 됩니다. (ES6+ 코드는 IE 미지원)
{% endhint %}
## 모듈 번들링
`bundle` NPM 명령을 실행해 모듈을 번들링 합니다.
```bash
npm run bundle
```
번들링에 성공하면 브라우저 개발 도구 Sources 탭에서 ES5 코드로 컴파일된 Button 컴포넌트 코드를 볼 수 있습니다.
## Babel 플러그인
[@babel/plugin-proposal-class-properties](https://www.npmjs.com/package/@babel/plugin-proposal-class-properties) 플러그인은 속성 초기화(Initializer) 구문으로 선언 된 속성 뿐만 아니라, 정적(Static) 클래스 속성 또한 변환(Transform) 합니다.
{% hint style="info" %}
플러그인 이름 그대로 ES 표준에 제안된(proposal) class 속성을 변환 처리하는 플러그인입니다.
{% endhint %}
먼저 Button 컴포넌트 class 내부에 속성 초기화 또는 정적 클래스 속성 구문을 작성해봅시다.
{% tabs %}
{% tab title="src/components/Button/index.js" %}
```javascript
class Button {
constructor(props) {
this.props = { ...props }
}
// ES 표준에 제안된 정적 클래스 속성 구문
static defaultProps = {
type: 'button',
}
render(domNode = document.body) {
// 속성 병합(mixins)
const buttonNode = createElement('button', {
...this.defaultProps,
...this.props,
})
render(buttonNode, domNode)
}
}
export default Button
```
{% endtab %}
{% endtabs %}
작성된 파일을 저장하고 번들링 하면 다음과 같은 오류가 발생합니다. 오류 내용은 실험적인 문법인 **classProperties**를 현재 사용할 수 없다는 문구입니다.
{% hint style="danger" %}
**ERROR** in **./src/components/Button/index.js** Module build failed (from ./node\_modules/babel-loader/lib/index.js): **SyntaxError**: /Users/yamoo9/Documents/PROJECT/js-senior-in-ogada/meetup(offline)/week01/02-setting-webpack/src/components/Button/index.js: **Support for the experimental syntax 'classProperties' isn't currently enabled** (13:16):
```javascript
11 | }
12 |
> 13 | defaultProps = {
| ^
14 | type: 'button',
15 | }
16 |
```
{% endhint %}
오류를 해결하려면 @babel/plugin-proposal-class-properties를 사용할 수 있도록 설치하고 구성해야 합니다.
{% tabs %}
{% tab title="패키지 설치" %}
```bash
npm i @babel/plugin-proposal-class-properties -D
```
{% endtab %}
{% tab title="webpack.config.js" %}
```javascript
module.exports = {
module: {
rules: [
{
test: /\.m?js/i,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
presets: ['@babel/preset-env'],
// Babel 플러그인 설정
plugins: ['@babel/plugin-proposal-class-properties']
}
}
]
}
}
```
{% endtab %}
{% endtabs %}
플러그인 사용을 위한 구성이 완료되면 오류 없이 번들링이 성공적으로 수행됩니다.
```bash
webpack 5.22.0 compiled successfully in 921 ms
```
{% hint style="info" %}
실습에서 설치해 사용한 플러그인 말고도 다양한 플러그인을 Babel JavaScript 컴파일러는 지원합니다. [Babel이 지원하는 플러그인 목록](https://babeljs.io/docs/en/plugins)을 참고해 사용하고자 하는 플러그인을 설치해 활용해보세요.
{% endhint %}
## 참고
{% embed url="" %}
{% embed url="" %}
##