ECMAScript 2015+ 코드를 이전 JavaScript 엔진에서 실행할 수 있는 이전 버전과 호환되는 JavaScript 버전으로 변환하는 데 주로 사용되는 무료 오픈 소스 JavaScript 트랜스 파일러
같은 언어로 작성된 소스 코드를 비슷한 수준의 추상화를 가진 다른 언어로 변환하는 것
바벨은 컴파일러의 역할과는 다르게 같은 언어를 다른 실행 환경에서도 돌아갈 수 있도록 형태만 바꾸는 작업을 진행한다.
$ npm i -D @babel/core @babel/preset-env @babel/plugin-transform-runtime
// .babelrc.js
module.exports = {
presets: ['@babel/preset-env'],
plugins: [
['@babel/plugin-transform-runtime']
]
};
이렇게 작성하면 해당 프로젝트 내 앞으로 작성하는 자바스크립트는 바벨을 통해 ES5 문법으로 변경되어 브라우저에 동작하게 된다.
plugins: [@babel/plugin-transform-runtime]
-> async await 패턴을 사용하기 위해서 필요하다.
// package.json
"browserslist": [
"> 1%", // 전세게 점유율 1% 이상인 브라우저
"last 2 versions" // 해당하는 브라우저의 마지막 두개의 버전 까지는 지원하겠다는 옵션
]
이전 포스팅(Autoprefixer 편)에서 browerslist 옵션을 설정했었다. 바벨도 영향을 받아 자바스크립트 문법에 최적화해서 변환하게 된다. 바벨을 적용할 때, 사전에 postcss를 적용했어서 browerslist 옵션 이있다면 넘어가지만 아니라면 코드를 추가해주자.
$ npm run dev
개발 서버를 실행해서 에러 안뜨는지 확인해준다.