- 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']], // 추가
};