Archive

Babel 이란 + 핵심사용법

livemehere 2022. 1. 15. 07:07

자바스크립트는 interpreter 언어입니다.

즉 코드를 읽으면서 실행하는언어인데, 공식 사이트의 소개는

Babel is Javascript compiler

라며 컴파일러라고 소개합니다.

ES6+ 문법이 나올 시점에는 브라우저가 이 문법을 이해하지 못했습니다.

현재는 explorer를 제외한 대부분의 브라우저가 ES6를 지원하고있지만, 100%는 아닙니다.

 

이런 이유들로 구형 브라우저를 지원하기 위해서 babel과 같은 트랜스 컴팔일러를 사용하여 ES5 이하의 버전으로 다운그레이드를 할 필요가 있습니다.

 

babel/core

babel을 사용하기위한 필수 패키지입니다.

Babel-polyfill

babel은 단순히 문법만 변환해주는 역할만 할 뿐입니다.

최신함수들을 사용하기위해서는 object의 prototype에 붙여주는 역할이 필요한데 이를 polyfill이 해주는 것입니다.

그래서 babel은 컴파일-타임에 실행되고, bablel-polyfill 은 런-타임에 실행됩니다.

 

.babelrc

root폴더에 생성해야하는 파일입니다.

plugins 와 presets 속성이 중요한데, 위에서 설명했던 문법 하나하나가 plugin이라고 생각하면됩니다.

plugin들을 plugins에 넣고, plugin이 여러개가 묶여있는것이 preset 입니다.

이 preset들을 presets에 넣어주면됩니다.

대표적으로 ES6문법을 모아놓은 es2015 preset 과 react 문법을 모아놓은 react preset이 있습니다

 

babel-cli

위에서 설정한대로 빌드하기위한 cli를 지원해 줍니다.

 

실습

test.js

const add = (a, b) => {
  return a, b;
};

 

 

설치

npm i @babel/core 
npm i @babel/cli

 

바벨실행

npx babel ./test.js

이때 아무일도 일어나지않습니다. 왜냐면 그냥 바벨만 실행했으니까 그렇습니다. 바벨을 실행할 때의 preset 과 plugin을 추가하지 않았기 때문이죠

 

 

plugin 을 하나 설치해봅니다(에로우 함수를 컴파일 해주는 plugin)

npm install --save-dev @babel/plugin-transform-arrow-functions

 

.babelrc 생성

{
    "plugins":["@babel/plugin-transform-arrow-functions"]
}

 

 

그리곤 실행

const add = function (a, b) {
  return a, b;
};

이런 결과가 나옵니다. 하지만 콘솔에 찍히고 끝입니다.

그리고 ES6의 모든 기능을 컴파일하려면 plugin 하나하나 다가져올 필요가없습니다. preset을 가져오면 됩니다.

 

ES6의 모든 문법을 컴파일해주는 preset 설치

npm i @babel/preset-env

공식 preset 중 하나입니다.

 

.babelrc 수정

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

그리고 실행하면 arrow function말고도 모든 ES6문법이 compile됩니다.

 

 

.babelrc 파일이 없다면, 직접 옵션을 주어 실행할 수 도 있습니다.

npx babel ./input.js --presets=@babel/preset-react --plugins=@babel/plugin-transform-template-literals,@babel/plugin-transform-arrow-functions

 

 

지금까지는 단순히 컴파일만해서 결과값을 콘솔창에 출력받았습니다.

컴파일된 파일로 추출하기 위해선 옵션을 추가해줍니다.

 

 

npx babel ./test.js --out-dir dist

"./test.js 파일을 컴파일할껀데, dist라는 dir에 결과값을 보내줘" 라는 뜻입니다.

 

 

또한

 

 npx babel ./test.js --out-file dist.js

--out-file 옵션으로 주면 파일로 내보낼 수도있습니다

 

npx babel ./test.js -w --out-file dist.js

-w 옵션을 주면 실시간으로 감지하고 변형시켜줍니다.

 

 

.babelrc 외에도, babel.config.js, babel.config.json 의 형태로 plugins과 presets 설정을 저장할 수 있습니다.

 

 

반응형