Parcel - Babel

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

• npm i -D @babel/core @babel/preset-env
• .babelrc.js 파일 생성
  • .babelrc.js 설정 후 package.json의 browserslist 옵션에 설정된 내용에 영향을 받음

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

// package.json
{
  "name": "parcel-bundler-study",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "parcel index.html",
    "build": "parcel build index.html"
  },
  "devDependencies": {
    "@babel/core": "^7.14.3",
    "@babel/preset-env": "^7.14.4",
    "autoprefixer": "^9.8.6",
    "parcel-bundler": "^1.12.5",
    "parcel-plugin-static-files-copy": "^2.6.0",
    "postcss": "^8.3.0",
    "sass": "^1.34.0"
  },
  "staticFiles": {
    "staticPath": "static"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

• async await 사용 시, 아래와 같은 에러 발생

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

• npm i -D @babel/plugin-transform-runtime
  • .babelrc.js 파일의 plugins에 추가

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