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반응형
