개인적인 사이드 프로젝트를 진행하며 google 검색을 통해 Cmd+c, Cmd+v 를 통해 의미없이 babel.config.js를 수정하다가 무수히 많은 에러가 발생했다. 이를 통해 Babel이 정확히 어떤 기능을 수행하는지 공식문서를 통해 알아보았다.
What is Babel?
Babel은 JavaScript 컴파일러이다.
주로 ECMAScript 2015+ 코드를 현재와 예전 브라우저 또는 환경에서 호환이 가능한 예전 버전의 JavaScrip로 변환하는 데 사용되는 toolchain이다.
Babel이 제공하는 주요 기능
- Transform syntax : 구문 변형
- 개발자가 대상으로 하는 환경에 없는 Polyfill 기능 제공 ( core-js와 같은 third-party Polyfill을 통해)
- 소스코드 변환 (codemods)
이 외에도
- ES2015 and beyond
- syntax transformers를 통해 최신 버전의 JavaScript를 제공한다.
- 이 plugins는 새로운 syntax를 브라우저 지원 없이 즉시 사용할 수 있게 해준다.
( 실제 작성법 → https://babeljs.io/docs/en/usage )
- JSX and React
- Babel은 JSX syntax를 변환할 수 있다!
( https://babeljs.io/docs/en/babel-preset-react )
- Babel은 JSX syntax를 변환할 수 있다!
- Type Annotations (Flow and TypeScript)
- Babel은 type annotaions를 strip out 할 수 있다.
- Babel은 type checking을 하지 않는다는 것을 명심해야 한다!
→ 따라서, type을 체크하기 위해서는 Flow 또는 TypeScript를 설치하고 사용해야 한다.
- Pluggable
- Babel은 plugins로 구성되어 있다.
- 존재하는 plugins을 사용하여 custom transformation pipeline을 구성하거나 직접 작성해야 한다.
→ 쉽게 plugins의 묶음을 사용하는 방법은 preset을 사용하거나 생성하는 것이다.
( plugins에 대한 자세한 설명 → https://babeljs.io/docs/en/plugins )
- Debuggable
- Source map이 제공되어 쉽게 컴파일된 코드를 debug할 수 있다.
- Spec Compliant (규정 준수)
- Babel은 ECMAScript 기준에 맞춰 최대한 합리적으로 개념을 지키려고 한다.
- 성능의 균형을 맞추기 위해 더 많은 사양 준수를 위한 구체적인 option들이 있을 수 있다.
- Compact
- Babel은 부피가 큰 runtime에 의존하지 않는 게 가능한 최대한 적은 양의 코드를 사용하려고 한다. 그러나 경우에 따라 어려울 수 있다.
- 가독성, 파일 크기, 속도를 위한 규격 준수를 절충하는 "assumptions" options이 있다.
Compiler assumptions → assumptions option을 configuration에 명시하여 Babel에게 코드에 대해 어떤 가정을 할 수 있는지 알려, 컴파일된 결과를 더 잘 최적화할 수 있다.
( 자세한 설명은 → https://babeljs.io/docs/en/assumptions )
밑줄 친 용어 정리
* 컴파일러 : 하나의 프로그래밍 언어로 작성된 소스코드를 다른 타겟 언어로 번역하는 컴퓨터 프로그램
* toolchain : 일반적으로 다른 컴퓨터 프로그램 또는 관련된 프로그램들의 묶음으로, 복잡한 소프트웨어 개발 업무를 완료하거나 소프트웨어 프로덕트를 제공하는 소프트웨어 개발 tool들의 묶음
* syntax : 언어의 구조를 정의하는 규칙
* Polyfill : 기본적으로 제공되지 않는 오래된 브라우저에게 모던한 기능을 제공하는 데 사용되는 code(주로 Web에서 사용하는 JavaScript)의 한 부분
* third-party (SW) : 특정 시스템에서 기존 프로그램을 공급하거나 개발한 회사와 다른 회사가 특정 목적을 위해 공급하거나 개발한 SW)
* codemods : 부분 자동화가 가능하지만 여전히 인간의 관리와 가끔은 개입도 필요한 거대한 양의 codebase refactors를 지원하는 tool/library
* strip out : 어떤 상황에서 제일 중요한 부분을 이해하기 위해 특정 숫자들이나 사실을 무시하다.
* pipeline : pipeline은 각 요소의 결과가 다음 입력이 되도록 배열된 일련의 처리 요소(processes, threads, funtions, etc.)들로 구성되어져 있다.
* Source Map : 배포용으로 빌드한 파일과 원본 파일을 서로 연결시켜주는 기능
* assumptions : 추정
References
https://babeljs.io/docs/en/
https://en.wikipedia.org/wiki/Toolchain
https://joshua1988.github.io/webpack-guide/devtools/source-map.html