[Parcel] Babel 설치하고 적용하기 🔨

🔨 Babel

Babel 공식 홈페이지 (https://babeljs.io/)를 열면 Babel is a JavaScript compiler를 볼 수 있다.
즉, Babel은 자바스크립트 컴파일러로, 최신 자바스크립트 문법(ES6, ES7, ES8)으로 작성한 코드를 구형 브라우저에서도 작동할 수 있는 ES5버전으로 변환하는 도구이다.

💻 Babel 설치

1. 터미널에 npm i -D @babel/core @babel/preset-env 입력

2. 루트경로에 .babelrc.js 파일 생성 후 다음 코드 저장

module.exports = {
      presets: ['@babel/preset-env']
  }

이렇게 완료되면 모든 자바스크립트는 바벨을 통해 es5문법으로 변경되어 동작하게 된다.

3. package.json 파일에 다음 내용 추가

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

postcss를 적용한 적이 있다면 이미 있을 부분이므로 없는 경우에만 추가하면 된다.

4. 터미널에 npm run dev 입력

프로젝트를 실행하여 오류 없음을 확인하자

5. 터미널에 npm i -D @babel/plugin-transform-runtime 입력

babel은 async await 문법이 기본설정만으로는 제공되지 않기 때문에 이 패키지를 설치해주어야 한다.

6. babelrc.js 파일에 다음 plugins 내용 추가

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

7. 잘 적용되었는지 확인하기 위해 main.js 파일에 다음을 추가

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

콘솔에 123이 나온다면 async await가 정상적으로 돌아가는 것이다.