[JS Bundler][Ch1][Parcel] babel

babel

ECMAScript 2015(ES6) 이상 버전의 코드를 이전 JavaScript 엔진에서 실행할 수 있는 이전 버전과 호환되는 JavaScript 버전으로 변환하는데 주로 사용되는 무료 오픈 소스 JavaScript 트랜스컴파일러

1. @babel/core 설치

npm i -D @babel/core

2. @babel/preset-env 설치

npm i -D @babel/preset-env

3. 루트 경로에 .babelrc.js 파일 추가

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

• 이렇게 작성하면, 우리가 앞으로 작성하는 모든 JavaScript는 babel을 통해서 ES5 문법으로 변경되어 브라우저에서 동작할 것이다.

4. package.json에서 borwserslist 옵션 추가

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

• babel도 borwserslist 옵션의 영향을 받아서 JavaScript 문법을 최적화하여 변환

5. async, await(비동기 문법)를 사용하기 위해 @babel/plugin-transform-runtime 설치

npm install -dev @babel/plugin-transform-runtime

6. babelrc.js 파일에 plugins 옵션 추가

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