자바스크립트 생태계의 한 축을 담당하는 Babel, 버전 7으로의 큰 도약을 준비하고 있습니다. 어떤 것들이 바뀔까요?

1. 미리보는 Babel 7
Hyeseong Kim
Blog: https://blog.cometkim.kr
E‐mail: cometkim.kr@gmail.com
GitHub: cometkim
Twitter: @KrComet

2. 목차
변경사항 둘러보기
어떻게 업그레이드 할까?
Babel 커뮤니티 소식

3. 변경사항 둘러보기

4. TL;DR 많지만 중요한 변경사항들
패키지 변경사항
크고 작은 내부 변경사항
많은 개선점들
.babelrc.js support
TypeScript preset
JSX Fragment syntax
Updated TC39 proposals

5. 패키지 스코프
Babel의 공식 패키지들은 이제 @babel 이라는 패키지 스코프를
사용합니다.
‐ babel‐cli
‐ babel‐core
‐ babel‐preset‐env
‐ babel‐polyfill
+ @babel/cli
+ @babel/core
+ @babel/preset‐env
+ @babel/polyfill

6. 설정파일에도 패키지 스코프를 명시해야 합니다.
예시: .babelrc
{
"presets": [
‐ "env"
+ "@babel/env"
],
"plugins" [
‐ "transform‐object‐rest‐spread"
+ "@babel/proposal‐object‐rest‐spread"
]
}

7. 아직 표준에 포함되지 않은 문법은 proposal 이라고 표기합니다.
‐ babel‐plugin‐transform‐class‐properties
‐ babel‐plugin‐transform‐object‐rest‐spread
+ @babel/plugin‐proposal‐class‐properties
+ @babel/plugin‐proposal‐object‐rest‐spread

8. 표준 연도가 패키지 이름에 들어가지 않습니다.
‐ babel‐plugin‐transform‐es2015‐arrow‐functions
+ @babel/plugin‐transform‐arrow‐functions

9. 연 표준 프리셋﴾babel‐preset‐es20xx﴿이 Deprecated 됩니다.
TL;DR: use babel‐preset‐env.
babel‐preset‐es2015
babel‐preset‐es2016
babel‐preset‐es2017
babel‐preset‐latest
stage‐x 프리셋은 계속 유지보수된다고 합니다.
그래도 이왕이면 env 프리셋을 사용하세요

10. Node 0.10, 0.12, 5 버전 지원이 중단됩니다.
세 버전은 모두 공식적으로 지원이 종료된 Node 버전입니다.
Release Status End‐of‐life
v0.10.x End‐of‐Life 2016‐10‐31
v0.12.x End‐of‐Life 2016‐12‐31
5.x End‐of‐Life 2016‐06‐30

11. 내부 종속성에서 babel‐runtime 이 제거됩니다.
Babel 6 에서는 모든 플러그인들이 폴리필을 위해 내부적으로 babel‐runtime 을
포함하고 있습니다.
이제 구 버전 Node 지원을 중단했기 때문에 더 이상 필요하지 않습니다!

12. babel‐core 가 peerDependency가 되었습니다.
yarn add ‐‐dev @babel/cli
> warning " > @babel/cli@7.0.0‐beta.40" has unmet peer dependency "@babel/core@7.0.0‐beta.40"
이제 원하는 버전의 babel‐core 를 package.json 에 명시적으로 추가해야 합니다.
‐ yarn add ‐‐dev @babel/cli
+ yarn add ‐‐dev @babel/core @babel/cli

13. .babelrc.js
이제 JSON 파일 대신 자바스크립트 모듈을 설정으로 사용할 수 있습니다.
예시: .babelrc.js
var env = process.env.BABEL_ENV || process.env.NODE_ENV;
var plugins = [];
if (env === 'production') {
plugins.push.apply(plugins, ["a‐super‐cool‐babel‐plugin"]);
}
module.exports = { plugins };

14. TypeScript !!
TypeScript 프리셋이 제공됩니다.
yarn add ‐‐dev @babel/preset‐typescript
이제 TypeScript를 더 쉽게 사용할 수 있습니다.
호환될 수 없는 몇 기능은 사용할 수 없습니다.
namespace , const enum , export = , import =

15. .babelrc.js
presets: [
+ '@babel/typescript',
]
webpack.config.js
module: {
rules: [
+ { test: /.(jsx?|tsx?)$/, loader: "babel‐loader" },
‐ { test: /.tsx?$/, loader: "ts‐loader" },
]
}

16. JSX Fragment syntax
React.Fragment 의 축약문법이 지원됩니다.
render() {
return (
<>
<ChildA />
<ChildB />
<ChildC />
</>
);
}

17. class A extends Array
Array , Error , HTMLElement 같은 내장객체를 상속할 수 있습니다.

18. env 프리셋이 개선됩니다.
useBuiltIns: "usage"
옵션을 사용해서 폴리필의 범위를 좀 더 세세하게 정할 수 있습니다.
overrides
webpack처럼, 규칙에 따라 특정 파일들이 제외되게 하거나,
서로 다른 규칙이 적용되게 만들 수 있습니다.

19. 기타
약 60%의 성능향상이 있습니다!
더 많은 변경사항은 Babel 블로그와 릴리즈에서

20. 새로운 TC39 제안
AKA the only things most of you care about
다음 기회에 살펴보기로...

21. 어떻게 업그레이드 할까?
변경사항이 너무 많다구요?

22. 그런 당신을 위해 ﴾Babel에서﴿ 준비했습니다!
https://github.com/babel/babel‐upgrade
npx babel‐upgrade

23. 프레임워크를 사용 중이라면?
2018년 3월 기준,
react:
react‐native:
babel‐preset‐react‐app:
babel‐preset‐expo:
기다립시다 ...또는 Contributor가 될 기회?

24. 업그레이드 가이드를 참고하세요
http://new.babeljs.io/docs/en/next/v7‐migration.html

25. 커뮤니티 소식

26. 새로운 홈페이지: new.babeljs.io

27. babel/babylon , babel/babel‐preset‐env
두 프로젝트가 babel/babel 에 통합되었습니다.

28. Babel의 메인테이너 Henry Zhu ﴾aka @left_pad﴿
So I just had my last day at work yesterday... and deep breath.. starting today, I'm
announcing that I'll be pursuing full time open source!
이제 풀타임으로 오픈소스에 공헌한다는 소식

29. 마무리하며...
회사에서, 개인프로젝트에서 자바스크립트를 사용하고 있다면,
분명 바벨을 사용하고 있겠죠?

30. “What happens if Babel dies”? What happens when the current group of people
interested in this project get bored/burned out/move on to other things?

31. 위대한 커뮤니티에 작은 공헌 돌려주기, 어렵지 않습니다.
https://opencollective.com/babel
아니면, 용기있는 메인테이너 Henry에게 한 잔 사주는 건 어떨까요?
https://www.patreon.com/henryzhu

32. 감사합니다.
내용에 대한 피드백, 질문은 언제든지 환영합니다
Hyeseong Kim
Blog: https://blog.cometkim.kr
E‐mail: cometkim.kr@gmail.com
GitHub: cometkim
Twitter: @KrComet