Pacel - Babel

 Babel 최신의 문법을 예전의 문법으로 변환해 주는 기능

 

npm 프로젝트에 설치

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

 

root 경로에 .babelrc.js 파일 생성

// 바벨을 통해서 모든 JS 파일은 ES5 형식으로 변환되어 브라우저에서 동작
module.exports = {
  presets: ['@babel/preset-env']
}

 

package.json 파일에 browserslist 항목 추가

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

 

main.js 파일에 비동기 함수 생성

// 비동기 함수 생성
async function test(){

  const promise = Promise.resolve(123);
  // 기다림
  console.log(await promise);
}

test();

 

실행 하면 에러가 발생한다.

 

에러를 처리해주기 위해 플러그인을 설치 해준다.

명령어: npm i -D @babel/plugin-transform-runtime

 

.babelrc.js 파일에 plugin 추가

// 바벨을 통해서 모든 JS 파일은 ES5 형식으로 변환되어 브라우저에서 동작
module.exports = {
  presets: ['@babel/preset-env'],
  plugins: [
    ['@babel/plugin-transform-runtime']
  ]
}

 

화면에서 정상 처리 확인