Babel - Webpack으로 통합하기

웹팩으로 통합

실무 환경에서는 Babel을 직접 사용하는 것보다는 웹팩으로 통합해서 사용하는 것이 일반적입니다.

 

로더 형태로 제공되는 babel-loader 를 사용합니다.

 

먼저 패키지를 install 합니다.

npm install babel-loader

 

그리고 webpack.config.js에 로더를 추가합니다.

module.exports = {
	// 우리가 지금 테스트하는 파일은 root에 있는 app.js 이므로 enrty를 변경해줍니다.
	entry: {
    main: './app.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader', // 바벨 로더 추가
        excude: /node_modules/  // 바벨이 node_modules에 있는 파일들을 처리하지 않도록 제외해줍니다.
      }
    ],
  },
}

 

자 이제 'npm run build' 명령어로 웹팩을 빌드해봅시다. 과연 잘 동작할까요? 안타깝게도 이 상태에서 빌드를 하면 아래와 같은 에러 메세지를 보게 되실겁니다.

 

위의 에러 메세지는 웹팩이 'node_modules'에서 'core-js'를 찾을 수 없다는 에러입니다. 이 에러가 발생하는 이유는 바벨이 'Promise' 를 처리하기 위해서 'core-js'를 'require()'하는 코드를 추가하기 때문입니다.

 

그렇다면 웹팩이 'core-js'를 찾을 수 있도록 install 해줍시다.

# 우리는 2버전으로 설정했었으니 2버전을 받아줍니다.
npm install core-js@2

 

 

그리고 다시 빌드해보면 정상적으로 빌드에 성공하는 것을 볼 수 있습니다.

 

정리

• Babel은 일관적인 방식으로 코딩하면서, 다양한 브라우저에서 돌아가는 애플리케이션을 만들기 위한 도구입니다.
• Babel의 코어는 파싱과 출력만 담당하고, 변환작업은 플러그인이 담당합니다.
• 여러개의 플러그인들을 모아놓은 세트를 프리셋이라고 하는데 ECMAScript+ 환경은 env 프리셋을 사용합니다.
• Babel이 변환하지 못하는 코드는 폴리필이라고 부르는 코드조각을 불러와 결과물에 로딩해서 해결합니다.
• 'babel-loader'로 Webpack과 함께 사용하면 훨씬 단순하고 자동화된 프론트엔드 개발환경을 갖출 수 있습니다.