Babel 7 Released

Haegul Pyun
Sep 2, 2018 · 6 min read

Use next generation JavaScript, today.

2018년 8월 27일. Front-End Developer라면 거의 모두 사용하고 있을 것이라 생각하는 Babel의 새로운 버전이 release 되었다. 기존 Babel 6이 나온지 3년이 되어가는 시점에서 Major 버전 업인 만큼 많은 변화가 생겼는데, 이번 기회에 어떻게 업그레이드 되었는지 살펴보도록 하자.


Node.js 지원 버전의 변경

기존 바벨에서 지원하고있던 node.js 0.10, 0.12, 4, 5버전의 지원이 중단되었다. 오피셜 가이드에서는 현재 LTS v8 버전을 권장하고 있으니, 이전 버전을 사용하는 개발자라면 이번 기회에 node.js 버전업도 같이 하도록 하자.

SPEED

기존 Babel보다 약 60% 정도 속도가 향상되었다고 한다.

Henry Zhu Twitter

Scoped Package 사용

기존에 npm에서 babel을 설치할 때 아래와 같이 설치하였다.

$ npm install babel-cli

하지만 버전 7부터는 npm scope인 babel을 붙이는 방식으로 변경되었다.

$ npm install @babel/cli 

설정파일을 사용할 경우에도 Scoped Package를 사용해야한다.

module.exports = {  
"presets": ["@babel/env"], // "@babel/preset-env"으로도 사용 가능
"plugins": ["@babel/transform-arrow-functions"]
};

Yearly Preset 지원 중단

babel-preset-2015 , babel-preset-2016 , babel-preset-2017 , babel-preset-latest 등의 지원이 중단된다. 이제부턴 babel-preset-env 로 완전히 대체되므로 env를 사용하도록 하자.

Stage Preset 지원 중단

Babel 7부터는 babel-preset-stage-x preset의 지원이 중단된다. spread, decorators등 아직 proposal단계인 문법들이 강력해서 자주 사용했었는데, 이제는 필요한 proposal을 직접 추가하여 사용하여야 한다. Babel에서는 이를 자동으로 바꿔주는 npx babel-upgrade라는 것도 있으니 잘 활용하면 좋을 것 같다.

또 TC39에서 제안한 플러그인은 -proposal이 붙게 되므로, 변경할 때 주의하도록 하자.

- @babel/plugin-transform-class-properties
+ @babel/plugin-proposal-class-properties

Babel Core의 Peer Dependency 변경

peer dependency란 특정 모듈이 다른 모듈과 함께 의존성을 가지는 것을 말한다. 따라서 앞으로 babel을 사용하기 위해서는 @babel/core 를 명시적으로 추가해야 한다.

Javascript Config Files

기존에는 .babelrc 에 JSON Format만 사용할 수 있었는데, babel.config.js 를 사용하여 js로도 export할 수 있게 되었다. 이에 따라 빌드 환경에 따른 분기처리를 보다 쉽게 할 수 있다.

설정 파일 overrides

overrides 라는 기능이 추가되었는데, 특정 파일에 대해서는 다른 preset을 적용할 수 있는 기능이다. 이 기능을 사용하면, client, server, 혹은 test 환경이라던지 필요에 따라 다른 preset를 적용하는게 가능하다.

TypeScript 지원

이번 버전에서는 Babel개발팀이 TypeScript팀과 협업하여 type syntax를 파싱/트랜스파일링 할 수 있도록 만들었다고 한다. 이제 Babel에서 @babel/preset-typescript 를 사용하여 Typescript를 컴파일 할 수 있다. 자세한 내용은 여기를 참고하도록 하자.

JSX Fragment Support

React로 개발할때 꽤 자주 사용하던 문법이 <React.Fragment>였는데, Babel7부터는 <>sugger syntax를 지원한다.

“Pure” Annotation Support

/*#__PURE__*/ 주석을 사용하여 minifiers에게 힌트를 줄수 있다는데, 아직까진 정확하게 어떻게 사용해야 할지 감이 잡히진 않는다. 혹시 아는 사람이 있다면 제보 부탁드립니다.

class C extends HTMLElement {}

Babe 7 에서 이제 HTMLElement , Array , Error 객체를 상속할 수 있다. 다른 언어에서는 Array를 상속해서 다양한 자료구조를 만들곤 했었는데, JS Class에서는 이에 대해 약간 아쉬운 감이 있었었다. 이번 기능의 추가로 Native built-in들을 상속함으로서 더 다양하게 Class를 사용할 수 있을 것이라 생각한다.


이 밖에도 Proposal의 자잘한 문법 변화, babel/core쪽 변화들이 있었지만 여기서는 다루지 않도록 하겠다. 이번 7버전은 그동안 Babel에 있었던 문제점의 수정, 그리고 재정비를한 느낌이 드는 메이저 업그레이드였다.

현대 JS에서 TC39의 새로운 Spec들은 개발의 생산성을 높여주고, 보다 편하게 개발할 수 있도록 많은 도움을 주고 있다. 이와 함께 Babel은 앞으로 프론트 개발에 있어서 더욱 그 필요성이 커질 것이라 본다. Javascript를 공부하면서 Babel의 다양한 기능들은 정말 보면 볼수록 흥미로우며, Babylon(지금은 @babel/parser로 이름이 바뀌었지만), core, generator, traverse등 어렵지만 알아두면 정말 큰 도움이 되는것 같다. 기회가 된다면 babel에서 사용하는 tooling들에 대해서도 다뤄보고 싶다.

Haegul Pyun

Written by

Software Engineer & Guitarist. The best moment has not coming yet. https://github.com/hg-pyun

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade