[Node.js] Babel (바벨) 이란? / 사용법

babel 이란?

최신 ES6, ES7 버전의 javascript코드를, ES5버전의 코드로 바꾸어주는 Node.js 패키지

 

babel의 필요성 / 쓰는 곳

자주변하는 javascript 최신 코드를 이해하지 못하는 웹 브라우저에서도 페이지에 접속할 수 있도록 해줍니다!

( 컴퓨터 뿐만아니라, 스마트폰에서 사용하는 브라우저도 포함 )

 

babel 작동방식

여러개의 플러그인이, 자신이 이해할 수 있는 ESNext 문법만 골라, 컴파일하는 방식

1. ESNext 구문을 Babel 플러그인으로 보냄

2. 여러개의 Babel 플러그인이 파이프라인 형태로 차례대로 실행

3. Babel플러그인이 이해할 수 있는 구문을 ES5코드로 컴파일 함

 

babel 설치

# @babel/node : Node.js 커멘드 라인에서 사용하는 명령어를 사용할 수 있게 해준다 ( node > babel-node )

npm install @babel/node


# @babel/core : 바벨의 핵심기능이 담겨있는 기본 라이브러리 

npm install @babel/core


# @babel/cli : 커맨드 라인에서 바벨을 실행할 수있는 라이브러리

npm install @babel/cli


# @babel/preset-"" : ESNext코드를 컴파일 해주는 플러그인 모음 설치

npm install @babel/preset-env (기본 js코드 검사)

npm install @babel/preset-flow (플로우 코드 검사)

npm install @babel/preset-typescript (타입스크립트 코드 검사)

npm install @babel/preset-react (리액트 코드 검사)

 

npm i -D @babel/core @babel/node @babel/preset-env

// 바벨 핵심기능, Node.js 명령줄 모드, 기본 js코드 검사 규칙 설치하기

 

babel 설정 파일 만들기

// .babelrc

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

// 기본 javascript 방식으로 바꾸어준다.

 

babel 사용해 ES5 코드로 바꾸기

babel src/js -w -d dist/js


// "src/js" 폴더에 있는 모든 ES6+ 파일들을 번들로 만들어, 그 결과를 "dist/js"폴더에 저장
// -w : 폴더에 있는 모든 파일 변경감지, 자동 변경 (--watch)
// -d : 결과 출력 폴더 지정 (--out-dir)


babel script.js -o compiled.js -s

// -o : 결과를 파일로 출력 (--out-file)
// -s : 난독화된 코드를 다시 읽기 좋게 바꾸는, 소스 맵 파일을 추가 (--source-maps)
// -s inline : 인라인(한줄씩) 소스 맵 사용


// --ignore "src/*" : "src폴더 안에 있는 모든 파일을 무시한다.
// --plugins=@babel/proposal-class : 컴파일 할때 사용할 플러그인 불러오기


// --copy-files --no-copy-ignored : 컴파일 안되는 파일 복사?
// --out-file "*.js" < "*.js" : 파이핑?

 

babel 사용해, Node.js 서버 실행하기

babel-node <Node서버>

// Node.js 서버의 최신 js코드를, es5 같은 호환성좋은 코드로 변환후, 서버까지 실행해준다.

 

babel 사용시 발생오류 해결법

// browserslist: caniuse-lite is outdated

npx browserslist@latest --update-db