Babel 로더

IE 웹 브라우저 대응

Button 컴포넌트를 작성하면서 사용된 코드는 ES6의 class 문법입니다. (사실 이 실습 파일의 모든 코드는 ES6입니다.) 안타깝게도 ES6+ 코드는 IE 웹 브라우저에서 제대로 지원하지 않습니다.

그러므로 class, ES Modules 등 ES6+ 문법을 사용한 앱 코드는 모두 IE에서 제대로 작동하지 않습니다. IE에서도 ES6 문법을 사용하려면 Babel JavaScript 컴파일러를 사용해야 합니다.

Babel + Babel Loader 구성

@babel/core, @babel/preset-env, babel-loader 패키지를 프로젝트에 설치한 후, Webpack 구성 파일의 모듈 규칙 안에 로더를 설정합니다.

패키지 설치

npm i @babel/core @babel/preset-env babel-loader -D

webpack.config.js

module.exports = {
  module: {
    rules: [
      // Babel 파일 로더 설정
      {
        test: /\.m?js$/i,
        exclude: /node_modules/,
        use: {
          loader:'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
}

"exclude" 설정은 정규식과 매칭되는 디렉토리 또는 파일은 로더에 의한 번들링에서 제외됩니다.

@babel/preset-env 프리셋은 Babel Foundation이 제공하는 번들로 유용한 Babel 플러그인 모음입니다. 이 프리셋을 설정하지 않으면 ES6+ 코드를 ES5로 컴파일 하지 않게 됩니다. (ES6+ 코드는 IE 미지원)

모듈 번들링

bundle NPM 명령을 실행해 모듈을 번들링 합니다.

npm run bundle

번들링에 성공하면 브라우저 개발 도구 Sources 탭에서 ES5 코드로 컴파일된 Button 컴포넌트 코드를 볼 수 있습니다.

Babel 플러그인

@babel/plugin-proposal-class-properties 플러그인은 속성 초기화(Initializer) 구문으로 선언 된 속성 뿐만 아니라, 정적(Static) 클래스 속성 또한 변환(Transform) 합니다.

플러그인 이름 그대로 ES 표준에 제안된(proposal) class 속성을 변환 처리하는 플러그인입니다.

먼저 Button 컴포넌트 class 내부에 속성 초기화 또는 정적 클래스 속성 구문을 작성해봅시다.

src/components/Button/index.js

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

작성된 파일을 저장하고 번들링 하면 다음과 같은 오류가 발생합니다. 오류 내용은 실험적인 문법인 classProperties를 현재 사용할 수 없다는 문구입니다.

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):

  11 |   }
  12 |
> 13 |   defaultProps = {
     |                ^
  14 |     type: 'button',
  15 |   }
  16 |

오류를 해결하려면 @babel/plugin-proposal-class-properties를 사용할 수 있도록 설치하고 구성해야 합니다.

패키지 설치

npm i @babel/plugin-proposal-class-properties -D

webpack.config.js

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']
        }
      }
    ]
  }
}

플러그인 사용을 위한 구성이 완료되면 오류 없이 번들링이 성공적으로 수행됩니다.

webpack 5.22.0 compiled successfully in 921 ms

실습에서 설치해 사용한 플러그인 말고도 다양한 플러그인을 Babel JavaScript 컴파일러는 지원합니다. Babel이 지원하는 플러그인 목록을 참고해 사용하고자 하는 플러그인을 설치해 활용해보세요.

참고

babel-loader | webpackwebpack

@babel/plugin-transform-class-properties · Babelbabeljs.io