[Parcel] - 바벨(Bable)

Yejin Yang·2022년 5월 7일
0

[Bundler]

목록 보기
5/11
post-thumbnail

바벨(Bable)이란?

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

transpile

같은 언어로 작성된 소스 코드를 비슷한 수준의 추상화를 가진 다른 언어로 변환하는 것
바벨은 컴파일러의 역할과는 다르게 같은 언어를 다른 실행 환경에서도 돌아갈 수 있도록 형태만 바꾸는 작업을 진행한다.

바벨 적용해보기

패키지 설치

$ npm i -D @babel/core @babel/preset-env @babel/plugin-transform-runtime

.babelrc.js 파일 생성

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

이렇게 작성하면 해당 프로젝트 내 앞으로 작성하는 자바스크립트는 바벨을 통해 ES5 문법으로 변경되어 브라우저에 동작하게 된다.

plugins: [@babel/plugin-transform-runtime]
-> async await 패턴을 사용하기 위해서 필요하다.

browerslist 옵션

// package.json
"browserslist": [
    "> 1%", // 전세게 점유율 1% 이상인 브라우저 
    "last 2 versions" // 해당하는 브라우저의 마지막 두개의 버전 까지는 지원하겠다는 옵션
  ]

이전 포스팅(Autoprefixer 편)에서 browerslist 옵션을 설정했었다. 바벨도 영향을 받아 자바스크립트 문법에 최적화해서 변환하게 된다. 바벨을 적용할 때, 사전에 postcss를 적용했어서 browerslist 옵션 이있다면 넘어가지만 아니라면 코드를 추가해주자.

개발 서버 실행

$ npm run dev

개발 서버를 실행해서 에러 안뜨는지 확인해준다.

profile
Frontend developer

0개의 댓글