babel

babel은 JFX로 작성된 react javascript 파일을 브라우저에서 인식할 수 있도록 변경해주는 컴파일러다. 예시로 아래처럼 생긴 코드를 브라우저에 렌더링 하려고 하면

 

const appRoot = document.getElementById('app');

function renderApp() {
    // JSX - JavaScript XML 
    var template = <div>
        <p>Hello react</p>
    </div>

    var appRoot = document.getElementById('app');
    ReactDOM.render(template, appRoot);
 }
 renderApp()

 

요런 에러가뜬다.

 

이건 JFX로 작성된 형태를 브라우저에서 읽을 수 없기 때문이다. react에서 기본적으로 만들어주는 프로젝트를 사용하면 이런 에러가 뜨지 않는데 처음부터 만들어가면 요런 에러를 보게 된다. babel 라이브러리를 이용하면 JFX로 작성한 언어를 컴파일해서 브라우저가 읽을 수 있는 형태로 바꿀 수 있다.

 

먼저 아래 명령어를 사용해서 babel을 설치한다.

 

npm install babel-cli

 

아래 명령어로 컴파일을 할 수 있다. 이 명령어의 뜻은 source 파일에 있는 build-it-visible.js 라는 파일을 babel로 컴파일해서 결과물을 public/scripts/app.js에 입력하라는 뜻이다. presets 옵션은 컴파일 옵션이고, watch는 build-it-visible.js 파일의 변화를 계속 관찰하겠다는 뜻이다. 저장하면 자동으로 컴파일을 해주므로 유용하다.

 

babel src/build-it-visible.js --out-file=public/scripts/app.js --presets=env,react --watch

 

그래서 아까 파일을 babel로 컴파일해주면 요렇게 바뀌게 된다.

 

'use strict';

var appRoot = document.getElementById('app');

function renderApp() {
    // JSX - JavaScript XML 
    var template = React.createElement(
        'div',
        null,
        React.createElement(
            'p',
            null,
            'Hello react'
        )
    );

    var appRoot = document.getElementById('app');
    ReactDOM.render(template, appRoot);
}
renderApp();

 

그리고 브라우저에서는 요렇게 잘 뜨게 된다.

 

 

사실 Babel은 인터프리터로 봐야한다.