babel은 자바스크립트의 최신 언어를 node환경에서 사용할 수 있게 해주는 아주 멋진 compiler 인데...
이 어원을 배웠는데 굉장히 흥미로웠습니다.
온 세상이 한 가지 말을 쓰고 있었다. 물론 낱말도 같았다. 사람들은 동쪽으로 옮아 오다가 시날 지방 한 들판에 이르러 거기 자리를 잡고는 의논하였다. "어서 벽돌을 빚어 불에 단단히 구워내자." 이리하여 사람들은 돌 대신에 벽돌을 쓰고, 흙 대신에 역청을 쓰게 되었다. 또 사람들은 의논하였다. "어서 도시를 세우고 그 가운데 꼭대기가 하늘에 닿게 탑을 쌓아 우리 이름을 날려 사방으로 흩어지지 않도록 하자." 야훼께서 땅에 내려 오시어 사람들이 이렇게 세운 도시와 탑을 보시고 생각하셨다. "사람들이 한 종족이라 말이 같아서 안 되겠구나. 이것은 사람들이 하려는 일의 시작에 지나지 않겠지. 앞으로 하려고만 하면 못할 일이 없겠구나. 당장 땅에 내려 가서 사람들이 쓰는 말을 뒤섞어 놓아 서로 알아듣지 못하게 해야겠다." 야훼께서는 사람들을 거기에서 온 땅으로 흩으셨다. 그리하여 사람들은 도시를 세우던 일을 그만두었다. 야훼께서 온 세상의 말을 거기에서 뒤섞어 놓아 사람들을 흩으셨다고 해서 그 도시의 이름을 바벨이라고 불렀다.
— 창세기 11장 1-9절 (공동번역)
출처: 나무위키
바벨은 말 그대로 이 탑인데
성경 구절에 따르면 원래는 예전에 모든 사람들이
동일한 언어를 사용했다고 합니다. 그런데 이 야훼라는 분이 사람들의 언어를 각기 다르게 만들어 버렸고
그 도시를 바벨이라고 지었다고 하네요.
이것에 유래해서 만든 babel이라는 compiler는 ,
browser내에서만 사용하던 자바스크립트를 브라우저 밖에서 사용할 수 있도록 만든 nodejs를
그러니깐 이 nodejs는 최신 자바스크립트 문법을 사용하지 못하는데
이를 사용할 수 있도록 compile 해주는 것이 babel입니다.
그러니 babel의 어원 처럼 각기 다른 언어를 사용하는 것을 반어법으로 사용해서
하나의 언어를 사용하는 것처럼 만들어 주는 것이 이 babel이라는 compiler 인 것 같습니다.!
babel 사용법
일단 babel 홈페이지로 들어가 주겠습니다!
Babel · The compiler for next generation JavaScript
The compiler for next generation JavaScript
babeljs.io
일단 setup으로 들어가주고요.
그리고 node로 가주세요!
다음 명령어 실행
npm install --save-dev @babel/core그리고 babel.config.json 파일을 만들어줍니다. 이름을 똑같이 해주셔야 합니다.
이 파일 안에
{
"presets": ["@babel/preset-env"]
}이 내용을 넣어줍니다. 여기서 preset은 babel을 위한 엄청 커다란 플러그인입니다.
그중 preset-env가 가장 유명하고 이 preset을 사용하면 최신 자바스크립트 문법을 사용할 수 있는 것입니다.
공식 홈페이지를 보면 많은 종류의 preset이 있습니다.
이 정도가 있겠네요. react에서도 typescript에서 사용할 수 있는 preset들이 있네요.
일단 저희는 env를 사용합니다.
그리고 이제
nodemon을 클릭 해줍니다.
npm install @babel/node --save-dev다음 명령어를 실행해서 babel/node를 설치 해줍니다.
이 babel-node를 통해서 우리는 최신버전 자바스크립트를 노드환경에서 사용할 수 있게 해주는 것입니다.
그리고 package.json으로 가서
script 부분을 다음과 같이 바꾸어줍니다.
"scripts": {
"dev": "nodemon --exec babel-node index.js"
},그러면 이제 npm run dev를 실행했을때
nodemon --exec babel -node index.js 가 실행 되는 것입니다.
한번 실행 해보겠습니다.
그럼 이렇게 console에 hellooo가 출력 되는 걸 볼 수가 있습니다!
그리고 1번째 줄을 보면
import express from "express"는 자바스크립트의 최신 문법으로 node로는 해석을 하지 못합니다.
node로 실행 시켜보겠습니다.
그럼 다음과 같이 error가 발생합니다.
이러한 최신 문법을 사용하기 위해 bable-node가 필요한 것입니다.