1. babel ?
babel은 자바스크립트 개발을 하다보면 자연스럽게 접하게 되는것인데, babel이란 babel공식 홈페이지에 보면 매우 간단하게 "babel is a Javascript complier." 라고 표현되어있다. 쉽게 말하면 자바스크립트의 컴파일러인 것이다. (여기서 컴파일러란 특정 프로그래밍 언어로 쓰여 있는 문서를 다른 프로그래밍 언어 혹은 컴퓨터 언어로 옮기는 일종의 번역 프로그램이다.) 그것도 코드를 코드로 바꿔주는 code to code 컴파일러이다. code to code라고 설명하는 이유는 최신의 자바스크립트의 코드들을 babel을 통해서 이전의 자바스크립트로 바꿔주는 역할을 수행하기 때문이다. 이 때문에 트랜스파일러(Transpiler)라고 불린다.
1) babel이 하는 일
a) 변환문구
b) 대상환경에서 누락된 폴리필 기능
c) 소스코드변환
2) 폴리필이란?
새로운 문법을 사용해 코드를 작성하면 트랜스파일러는 이를 구 표준을 준수하는 코드로 변경해줍니다. 반면, 새롭게 표준에 추가된 함스는 명세서 내 정의를 읽고 이에 맞게 직접 함수를 구현해야 사용할 수 있다. 자바스크립트는 매우 동적인 언어라서 원하기만 하면 어떤 함수라도 스크립트에 추가할 수 있다. 물론 기존 함수를 수정하는 것도 가능하다. 개발자는 스크립트에 새로운 함수를 추가하거나 수정해서 스크립트가 최신표준을 준수 할 수 있게 작업할 수 있다.
이렇게 변경된 표준을 준수할 수 있게 기존 함수의 동작 방식을 수정하거나, 새롭게 구현한 함수의 스크립트를 "폴리필(polyfill)" 이라고 부른다. 폴리필은 말 그대로 구현이 누락된 새로운 기능을 메꿔주는 역할을 해준다.
3) 바벨시작
npm install --save-dev @babel/core @babel/cli @babel/preset-env① @babel/core : babel의 핵심기능 모듈.
② @babel/cli : 터미널에서 babel을 사용할 수 있게 해주는 도구.
./node_modules/.bin/babel src --out-dir lib
--out-dir위 의 옵션을 사용했는데, cli 도구를 실행하였기 때문에 가능한거임.③ @babel/plugin : 플러그인 -에 해당하는 자바스크립트 문법들을 변환해줌.
npm install --save-dev @babel/plugin-transform-arrow-functions④ @babel/preset-env : 필요한 플러그인 조합을 공유 / 구성이 없으면 이 사전 설정에는 최신 JavaScript(ES2015, ES2016 등)를 지원하는 모든 플러그인이 포함
++ -g / --save-dev
--save-dev 옵션으로 설치하는 이유는 하나의 컴퓨터에 존재하는 다른 프로젝트들이 각각 다른 버전의 babel에 의존성을 갖고 있을 수 있습니다. --save-dev 옵션을 통해서 이를 해결할 수 있다.
4) 바벨과 트랜스파일러
바벨은 ES6이상의 문법을 ES5문법을 변환해주거나(es6->es5) 현재 브라우저에는 없는 새로운 문법을 추가해주는(es5기준) 트랜스 파일러이며, 브라우저 환경에서 안전하게 자바스크립트를 사용하게 위해 사용된다.
트랜스파일러란 한 언어로 작성된 소스 코드를 비슷한 수준의 추상화를 가진 다른언어로 변환하는 것을 의미한다. 컴파일은 한 언어로 작성된 코드를 다른 언어로 변환하는 것인데, 트랜스파일러와 컴파일은 이 부분에서 다르다.
ex. Compiler
◾ Java -> bytecode
◾ c -> assembly
ex. Transpiler
◾ es6 코드 -> es5 코드로 변환하는 경우
◾ c++ -> c
(babel https://babeljs.io/)
transpiler는 다른 말로 source to source complier라고도 설명하기도 하며, 컴파일러의 일종으로 트랜스파일러를 설명하고 있다. 따라서 complie이라는 용어가 더 큰 범주에 속하게 되고, 그 안에 transpile이라는 개념이 있게 되는 것이다.
즉, 트랜스파일(transpile)은 하나의 소스 코드를 다른 소스 코드로 변환하는 것을 뜻하는 용어이다. 소스 코드를 기계 언어로 변환하는 과정인 컴파일(compile)과 구분하기 위해 만들어졌으나 맥락상 의미를 꼭 구분해야하는 경우가 아니면 그냥 컴파일이라고 쓰는 경우도 많다.
