Babel

ES5 버전으로 변환시켜주는 컴파일러, Babel을 설치해보도록 합시다. 관련하여 Babel에 대해 더욱 자세히 알고 싶으시다면 이 글을 참고 부탁드립니다.

Babel 설치 및 설정

1.1 패키지 설치 (1)

babel/core를 포함한 3가지 패키지를 개발 의존성 모듈로 설치해줍니다.

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

1.2 .babelrc.js 파일 생성

.babelrc.js 마침표로 시작하는 rc(runtime configuration) 파일, 즉 구성 파일을 만들어줍니다. 마침표로 시작하는 것은 구성 옵션이나 숨김 파일을 의미합니다.

1.3 export

.babelrc.js 파일 내에 아래 내용을 코딩해줍니다.

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

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

1.4 webpack.config.js (1)

package.json 파일에 browerslist 옵션을 코딩해줍니다. browerslist 옵션은 현재 NPM 프로젝트에서 지원할 브라우저의 범위를 명시하는 용도입니다.

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

이것은 현재 프로젝트에서 전 세계의 점유율이 1% 이상인 모든 브라우저의 마지막 2개 버전까지 모두 지원을 하겠다는 의미입니다.

1.5 webpack.config.js (2)

module: {
  rules: [
    {
      test: /\.js$/,
      user: [
        'babel-loader'
      ]
    }
  ]
},

또한, 위 내용을 코딩하여 main.js와 같이 .js 확장자로 끝나는 JavaScript 파일들을 webpack에서 babel-loader로 읽어들여 Babel이 적용될 수 있도록 명시해주도록 합니다.

1.6 패키지 설치 (2)

$ npm i -D babel-loader

위에서 언급한 babel-loader 패키지를 추가적으로 설치해주면 준비과정은 끝이 납니다.

1.5 개발 서버 오픈

개발 서버를 열어서 패키지가 잘 설치되었는지 확인해줍니다. 확인을 위한 간단한 방법으로 main.js 파일에 아래와 같이 비동기 함수를 작성합니다.

async function test() {
  const promise = Promise.reseolve(123)
  console.log(await promise)
}
test()

Babel이 정상적으로 작동했다면, 아래 그림과 같이 콘솔창에 123이 출력된 것을 볼 수 있습니다.