Babel설치

Babel이란?

먼저, Babel이란 무엇인지 개념을 정리해보도록 하겠습니다.

Babel은 ECMAScript 2015+ 코드를 이전 JavaScript 엔진에서 실행할 수 있는 이전 버전과 호환되는 JavaScript 버전으로 변환하는 데 주로 사용되는 무료 오픈 소스 JavaScript 트랜스 컴파일러입니다.

많은 분들이 아시다시피 웹 프론트엔드는 너무나도 빠르게 발전하며, 최신 브라우저마저 지원하지 못하는 문법과 여러 기술들이 출현하고 있습니다.

그렇기 때문에 새로운 문법을 기존 브라우저에서도 사용하기 위해 babel은 필수적입니다.

그럼 오늘은 webapck으로 babel패키지를 설치하는 방법에 대해 다뤄보도록 하겠습니다.

Babel 설치

1. 패키지 설치

$ npm i -D @babel/core @babel/preset-env @babel/plugin-transform-runtime

2 .babelrc.js 파일 생성

.babelrc.js 구성 파일을 만들어 아래와 같이 구성옵션을 정리해줍니다.

module.exports = {
  presets: ['@babel/preset-env'],
  plugins: [
    ['@babel/plugin-transform-runtime']
  ]
}

구성옵션

• presets : 하나하나 명시해주어야하는 자바스크립트 기능을 한번에 지원해주는 패키지 입니다.
• plusgins : presets과 다르게 2차원배열 형식으로 작성을 해줍니다.
  • @babel/plugin-transform-runtime 비동기처리를 위한 패키지입니다.

위 작업으로 프로젝트에서 작성하는 모든 JavaScript는 Babel을 통해 ES5 버전으로 변환되어 브라우저에서 동작하게 됩니다.

3. webpack.config.js

module의 rules에 새로운 객체데이터로 아래와 같이 규칙들을 명시 해줍니다.

  module: {
   /* rules: [{
        test: /\.s?css$/,
        use: [
          'style-loader',
          'css-loader',
          'postcss-loader',
          'sass-loader'
        ]
      },*/
      {
        test: /\.js$/,
        use: [
          'babel-loader'
        ]
      }
    ]
  },

• babel-loader
  : 함께 설치한 @로 시작하는 다른 여러가지 패키지들을 웹팩이 해석할 수 있도록 도와주는 매개체 역할을 하는 패키지입니다.
  즉, .js 확장자명으로 끝나는 파일들을 babel-loader가 읽어들여서 그것들이 실제로 bable에 적용될 수 있도록 돕는 것입니다.

"browserslist": [
    "> 1%",
    "last 2 versions"
  ]

4. 패키지 설치 (babel-loader)

$ npm i -D babel-loader