프론트엔드 - Babel을 이해하고 적용해보자!(트랜스파일러)

오늘은 Babel을 이해하고 적용해보는 시간을 가져보겠습니다.

크롬, 사파리, 파이어폭스, 엣지 같은 에버그린 브라우저의 ES6 지원율은 약 98%로 지원하지만 아직은 IE에서는 11%밖에 지원해주지 않습니다. 따라서 IE를 포함한 구형 브라우저에서 문제없이 동작시키기 위한 개발 환경을 구축하는 것이 필요합니다.

 

예를 들어보자

IE 같은 구형 브라우저에서는 ES6의 화살표 함수와 ES7의 지수 연산자를 지원하지 않을 수 있습니다.

 

[1.2.3].map(n => n **n)

 

Babel을 사용하면 위 코드를 다음과 같이 ES5 사양으로 변환할 수 있습니다.

 

"use strict"

[1, 2, 3].map(function (n) {
	return Math.pow(n, n);
});

 

다음과 같이 명령어를 입력하여 Babel과 관련된 메인 패키지를 설치합니다.

- @babel/core는 어떤 방식으로 Babel을 사용하든 반드시 필요한 패키지입니다.

- @babel/cli는 터미널에서 커맨드를 입력하여 Babel을 사용할 때 필요한 패키지입니다.

npm install --save-dev @babel/core @babel/cli

 

또한 @babel/preset-env도 설치해주어야 하는데 이는 Babel 플러그인을 모아 둔 것으로 Babel 프리셋이라고 합니다.

이 또한 설치해두록 합시다.

 

npm install --save-dev @babel/preset-env

 

설치가 완료되면 package.json은 다음과 같이 패키지들이 설치됩니다.

--save-dev을 사용하였기 때문에 개발환경에서만 적용되도록 하였습니다.

  "devDependencies": {
    "@babel/cli": "^7.14.8",
    "@babel/core": "^7.15.0",
    "@babel/preset-env": "^7.15.0",
  }

 

이제 간단하게 .babelrc 파일을 만들고 다음을 입력해줍니다.

{
  "presets" : ["@babel/preset-env"]
}

 

저의 경우는 리액트 프로젝트를 진행하기 때문에 리액트 코드를 js로 변환해줄 presets도 추가해주었습니다.

preset-env에 target도 설정할 수 있는데, browers가 최신 브라우저 버전 2단계까지 적용되고 점유율이 0.25% 넘는 것만 

적용되도록 구현하였습니다.

 

또한 plugins도 적용해주었는데 plugins은 규칙 하나하나 preset으로 적용이 안되는 경우 특정 문법을 변환해주기 위해서 추가해줍니다. 

저의 경우는 template-literal문법과 arrow-function을 적용해주기 위해서 추가해주었습니다.

{
	"presets": [
		[
			"@babel/preset-env", {
				"targets": {
					"browsers": ["last 2 versions", ">= 0.25% in KR"]
				}
			}
		]
		,
		 "@babel/preset-react"
	],
	
	"plugins": [
		"@babel/plugin-transform-template-literals",
		"@babel/plugin-transform-arrow-functions"
	]
}

 

자 이제 세팅을 했으니 간단하게 변환해보도록 하겠습니다.

현재 코드는 리액트로 이루어진 코드입니다.

 

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.querySelector('#root'));

 

다음의 명령어를 이용해서 ES5로 이루어진 자바스크립트 코드로 변환해줄 예정입니다.

 

"build": "babel src/index.js -w -d dist/js"

 

결과는 다음과 같습니다.

잘 변환되었음을 알 수 있습니다.

"use strict";

var _react = _interopRequireDefault(require("react"));

var _reactDom = _interopRequireDefault(require("react-dom"));

var _App = _interopRequireDefault(require("./App"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

_reactDom.default.render( /*#__PURE__*/_react.default.createElement(_App.default, null), document.querySelector('#root'));

 

하지만 Babel은 node.js 기반의 ESM 모듈을 사용하기 때문에 브라우저에서 해석하기 어려운 코드를 만들어 냅니다. 

이를 개선하기 위해서 Webpack을 사용하게 됩니다.

 

참고 사이트 및 서적

 

https://www.daleseo.com/js-babel/

바벨(Babel 7) 기본 사용법

 

http://www.yes24.com/Product/Goods/92742567

모던 자바스크립트 Deep Dive - YES24