React로 개발하고 있다면 거의 대부분 babel도 함께 사용하고 있을 것 입니다.
create-react-app 에도 기본으로 들어가있고 react 관련 튜토리얼을 따라 하다보면 자연스럽게 babel을 설치하게 된다. 굳이 react가 아니더라도 javascript를 사용한다면 babel를 사용해주는것이 좋다.
[ babel 이란 ? ]
babel은 javascript 컴파일러다 . 입출력 모두 javascript 코드이다.
[ babel을 사용하는 이유 ]
최신 버전의 javascript 문법은 브라우저가 이해하지 못하기 때문에 babel이 브라우저가 이해할 수 있는 문법으로 변환해준다. ES6 , ES7 등의 최신 문법을 사용해서 코딩을 할 수 있기 때문에 생산성이 향상된다.
[ babel-polyfill ]
polyfill이란?
충전솜이라는 의미를 가지고 있다. 솜이 꺼졌을때 충전솜을 채워 메꾸는 역할을 한다.
개발자가 특정 기능이 지원되지 않는 브라우저를 위해 사용할 수 있는 코드 조각이나 플러그인을 의미 한다.
브라우저에서 지원하지 않는 기능들에 대한 호환성 작업을 채워 넣는다고 해서 polyfill 이라고 칭한다.
babel은 이러한 polyfill을 손쉽게 지원하기 위해 babel-polyfill 기능을 지원한다.
babel를 사용하면 뭐든게 다 맞춰주는건줄 착각했었지만 babel은 정말 문법만 변환시켜주는 transpiler 역할만 할 뿐이고 polyfill은 프로그램이 처음에 시작될 때 지원하지 않는 기능들을 추가해줍니다.
babel 실행은 컴파일시점, babel-polyfill 실행은 런타임 시점에 실행됩니다.
바벨은 ESNext 에서 지원하는 문법을 ES5 문법으로 번역해주지만, ES5에 존재하지 않는 ES6의 Map, Promise, Set, Object.assigin() 이런애들은 존재하지 않으니 번역을 해줄수가 없다.
그래서 저걸 매꾸기 위해 polyfill 을 사용한다. (Map, Promise, Set 등을 사용가능한 객체로 만들어준다)
babel 은 babel-polyfill 모듈을 사용하면 되지만, 현재 deprecated 되었기 때문에 core-js와 regenerator-runtime을 직접 사용하는 방식을 제안하고 있다.
[ babel CLI 설치 ]
npm을 사용하여 babel CLI을 설치한다.
# package.json 생성
$ npm init -y
# babel-core , babel-cli 설치
$ npm install --save-dev @babel/core @babel/cli
[ .babelrc 설정 ]
babel을 사용하려면 @babel/preset-env 을 설치해야 한다.
@babel/preset-env는 babel 플로그인을 모아 둔 것으로 babel preset 이라고 부른다.
Babel이 제공하는 공식 babel preset 종류
@babel/preset-env은 필요한 플러그인들을 프로젝트 지원 환경에 맞춰 동적으로 결정해준다.
프로젝트 지원환경은 Browserslist 형식으로 .browserslistrc 파일에 상세히 설정할 수 있다. 설정을 생략하면 기본값으로 설정된다.
# @babel/preset-env 설치
$ npm install --save-dev @babel/preset-env
설치가 완료되었다면 프로젝트 루트에 .babelrc 파일을 생성하고 @babel/preset-env를 사용하겠다는 의미로 아래와 같이 작성해준다.
[ babel plugin 설치 방법 ]
설치가 필요한 플러그인은 Babel 홈페이지에서 검색할 수 있다. 상단 메뉴의 Search에 제안(프로포절)의 이름을 입력하면 해당 플러그인을 검색할 수 있다. 클래스 필드 정의 제안 플러그인을 검색하기 위해 “Class field”를 입력해보자.
검색해보면 @babel/plugin-proposal-class-properties 이 나온다. 설치해보자
$ npm install --save-dev @babel/plugin-proposal-class-properties
설치한 플러그인은 .bablerc에도 추가해 주어야 한다.
다음은 Webpack를 적용해보자
참고 :
'React > Babel과 WebPack 을 이용한 ES6 환경 구축' 카테고리의 다른 글
| Babel과 Webpack을 이용한 ES6 환경 구축(2) - Webpack 이란? (0) | 2021.06.03 |
|---|
