Note Babel ES6 preset
IE9 같은 구형 브라우저를 지원해야 하는 불운한 상황에도 불구하고, 미래의 표준인 ES6+/ES2015+를 사용하고자 한다면, babel-preset-es2015(www.npmjs.com/package/babel-preset-es2015) 트랜스파일러를 추가할 수 있다. 이 라이브러리를 이용하면 ES6 코드를 ES5 코드로 변환할 수 있다. 먼저 다음과 같이 라이브러리를 설치한다.
$ npm i babel-preset-es2015 --save-dev
다음으로, Babel의 presets 항목에 react와 함께 추가한다.
{
"presets": ["react", "es2015"]
}
구형 브라우저 지원이 필요하지 않다면 ES2015 트랜스파일러를 사용하는 것을 추천하지 않는다. 여기에는 몇 가지 이유가 있다. 첫째, ES6 코드보다 최적화가 부족한 오래된 ES5 코드를 실행하게 된다. 둘째, 의존성이 늘어나고 더 복잡한 코드가 된다. 마지막으로, 만약 대부분의 사람이 브라우저에서 ES5 코드를 계속해서 실행한다면 브라우저 개발팀이나 자바스크립트 개발자가 ES6를 신경 쓰겠는가? 구형 브라우저 지원이 필요하다면 TypeScript(www.typescriptlang.org), 또는 ClojureScript(http://clojurescript.org), CoffeeScript(http://coffeescript.org) 등을 사용하는 편이 더 나을 수도 있다.9
부록 A의 내용을 반복하려면 package.json 파일에 다음과 같이 presets 항목을 작성해야 한다.
{
...
"babel": {
"presets": ["react"]
},
...
}
9 역주 IE9 미만의 브라우저에서 Babel을 사용하려면 loose mode 설정, babel-plugin-transform-es3-member-expression-literals, babel-plugin-transform-es3-property-literals, es3ify-loader 같은 도구도 생각해볼 수 있다. 그러나 React의 경우 버전 15 이후에는 IE8 지원을 중단했으므로 이전 버전을 사용해야 하는 등 여러 가지 어려움이 있다(https://reactjs.org/blog/2016/01/12/discontinuing-ie8-support.html).