Babel의 뜻과 사용법

※ 이 글은 예전 블로그에서 퍼왔으며 2019.12.10.에 작성된 글입니다.

---

Babel은 자바스크립트 컴파일러 이다.

Babel을 주로 사용하는 이유는 새로운 방식의 자바스크립트로 개발을 하고

이전 방식의 자바스크립트로 배포하기 위해서 사용한다.

​

먼저 Babel을 설피하기 위해선 node.js를 설치해야 한다.

Node.js

node.js를 설치했다면

Babel Tutorial

---

만약 React에서 사용했을 때, 이런 dog같은 오류가 뜬다면

(ex. SyntaxError / Unexpected token)

SyntaxError: jsx/script.jsx: Unexpected token (2:2)
  1 | ReactDOM.render(
> 2 |   <Clock />,
    |   ^
  3 |   document.getElementById('content')
  4 | )
  5 | 
SyntaxError: jsx/script.jsx: Unexpected token (1:16)
> 1 | ReactDOM.render(<h1>HelloWorld</h1>, document.getElementById("content"));
    |                 ^
  2 | 

꼭 이걸 설치하세요

npm install babel-preset-react

그리곤 .babelrc 파일을 만들어서

{
  "presets": ["react"]
}

을 붙여넣기 해주면 JSX파일이 Javascript파일로 transfrom되는 기적을 볼 것입니다..