[babel] 이제야 알게 된 babel의 기적. babel 학습하기.

2년 전에 스터디를 하면서 express를 잠깐 사용해 본 경험이 있습니다. 그 이후로는 전혀 사용해 보지 않았죠. 최근에 우아한 테크 러닝을 진행하면서 node가 설치된 서버에 express 프레임워크로 구축하고 개발하면서 에러가 발생했습니다.

 

개발한 코드를 실행하면서 node에서 발생한 에러였습니다.

SyntaxError: Unexpected token export at Module._compile ..

vscode 에러 메시지

export랑 import 문법에서 에러가 자꾸 발생했습니다.

원인의 코드

 

 

 

왜 안되지?...(웹 개발 2년 차)

 

 

 

원인

node에서 런타임 예외가 발생했습니다. node가 es6 이상의 문법에서만 지원하는 import와 export를 이해하지 못하고 에러가 나는 것이었습니다.

이 순간. 저는 깨닫고 말았습니다.

사람들이 왜 그렇게 babel을 찾았는지를 말이죠.....

 

저는 babel을 왜 써야 하는 건지 이유를 몰랐습니다. 이렇게 생각해버린 이유는 두 가지가 있습니다. 

1. 회사: vue-cli로 개발 환경을 자동으로 구축하고 개발을 해서, 개발 환경 실행과 빌드가 프로젝트 생성 초반부터 잡혀있습니다.

2. 개인 공부: Vanilla Javascript es6문법으로 웹을 만들고 실행하면 브라우저는 아무런 이상 없이 기능을 잘 수행해 주었습니다. 당연히 node 런타임이 필요 없이 최신 Chrome이나 Brave 브라우저가 잘 실행해 줬거든요. 

 

 

node를 좀 더 찾아보니 node의 특성을 구체적으로 이해할 수 있었습니다.

NodeJS는 아직 CommonJS 기반 모듈 시스템을 사용하기 때문에 ES6의 import 나 export
와 같은 키워드는 디폴트로 지원되지 않고 있습니다.

 

 

이번 버그를 만나면서 확실히 알게 되었습니다. es6 이상의 최신 Javascript문법을 사용하면, 프론트나 백엔드나 모두 babel을 반드시 사용해서 트랜스파일링을 해줘야 합니다. 그래야, 거의 모든 브라우저에서 지원을 할테고, 서버의 node에서도 실행하면서 JS문법 버전으로 인한 문제가 발생하지 않을 겁니다.

 

 

 

babel

babel은 ES6/ES7 코드를 ECMAScript5 코드로 트랜스파일링을 하기 위한 도구입니다.

쉽게 말해서, 최신 버전의 Javascript 문법을 지원하지 않는 오래된 브라우저와 node.js에 대응하기 위해서 사용합니다.

추가로, Javascript를 압축해서 배포해주는 기능의 패키지도 있습니다.

 

※ 트랜스파일러 : Babel이 최신 버전 Javascript로 개발을 하고 서버든, 웹이든 빌드할 때, es5 문법의 Javascript로 변환해 줍니다. 

 

babel 사용 방법.

1. node.js 설치

 

2. 터미널의 프로젝트 홈 경로에서  npm init -y 

npm init -y

⚠️ npm 초기화 명령어입니다.  '-y'는 모든 설치 옵션 물음에 'yes'하겠다는 옵션입니다.

 

3. 터미널의 프로젝트 홈 경로에서 Babel을 설치합니다.

babel-cli는 커멘드(명령어)로 babel을 실행할 수 있게 해주는 패키지입니다.

package.json에서 babel의 build를 위한 명령어를 작성해서 babel 트랜스파일링을 하려고 설치합니다.

 npm i -D babel-cli 

 

4. ECMA2015 문법으로 변경해주는 babel의 노드 패키지를 설치합니다.

 npm i -D babel-preset-es2015

 

5. .Babelrc 설정 파일 생성 

프로젝트 홈 경로에 .Babelrc 파일을 만듭니다. 

내용을 작성합니다.

{
  presets: ["es2015"]
}

 

6. 프로젝트 홈 경로에 package.json의 "script" 객체에 babel build를 위한 npm script 명령어를 만듭니다.

"babelBuild": "babel ./src -d ./dist/ -w"

 

7. 명령어 실행

$ npm run babelBuild 

 

babel을 사용하면 문법이 다음처럼 변합니다.

왼쪽이 es6 최신 문법으로 Javascript 모듈을 import 하는 문법입니다.

babel을 사용해서 트랜스파일링을 하면, 오른쪽처럼 문법이 변해있습니다. 

node는 오른쪽 문법만을 이해할 수 있습니다.

ES6 이상의 문법으로 import 하기

 

 

 

추가

배포할 때에는 압축된 스크립트 파일로 배포하는 것이 좋습니다. 이 작업도 babel이 빌드하면서 같이 해줄 수 있습니다.

 

1. 터미널의 프로젝트 홈 경로에 명령어 입력.

$ npm i babel-preset-minify 

 

2. 프로젝트 홈 경로에 .babelrc에 minify를 추가합니다.

{
  "presets": ["es2015", "minify"]
}

 

 

 

레벨업

제가 개발하는 제품이 제가 구축한 환경이 아니더라도, 어떤 스펙을 사용하고 있고, 이 스펙을 왜 쓰는지, 무엇인지 정도는 알고 있어야 했는데, 그렇제 않았습니다. 이 점을 반성하고 babel 뿐만 아니라, 회사 제품의 스펙을 잘 파악했습니다.