반응형
Babel
- 바벨 공식문서에서는 바벨을 자바스크립트 컴파일러라고 소개하며 최신 자바스크립트 문법을 사용할 수 있다고 나와있으며 더 정확하게 말하면 트랜스파일러라고 말할 수 있습니다.
- 왜 바벨이 필요하고 바벨이 있어야만 자바스크립트의 최신 문법을 사용할 수 있는 이유는 자바스크립트가 실행되는 환경때문입니다. 다른 언어와 달리 자바스크립트는 정말 많은 환경에서 실행되는데 웹 브라우저, NodeJS, Deno 등에서 실행되는데 웹 브라우저 또한 각자 다른 자바스크립트 엔진을 통해 자바스크립트 코드를 읽게 됩니다.
- 게다가 이렇게 실행되는 환경의 버전에도 자바스크립트는 영향을 받으며 특정 버전 이상에서만 실행되는 코드가 있고 특정 브라우저에서는 실행되지 않는 코드도 있습니다. 그렇기 때문에 모든 자바스크립트 실행 환경에서 정상적으로 동작할 수 있도록 하려면 바벨이 필요하다.
바벨 설치
다음과 같이 바벨의 기본 모듈들을 설치해줍니다.
$npm i -D @babel/core @babel/cli @babel/preset-env
각 모듈은 다음과 같은 역할을 합니다.
- @babel/core: 바벨의 핵심 기능들을 포함.
- @babel/cli: 터미널에서 바벨 명령어를 사용할 수 있게 도와줍니다.
- @babel/preset-env: 코드 구문 변환 설정을 도와줌 (지원 브라우저 점유율, 호환성 설정 등)
$npm i -D @babel/plugin-proposal-optional-chaining
옵셔널 체인징과 같은 플러그인 또한 설치 하여 설정할 수 있습니다.
바벨 공식문서의 플러그인 메뉴로 이동하면 친절하게 문법마다 필요한 플러그인들을 설명해주고 있습니다.
https://babeljs.io/docs/en/babel-core
babel.config.json
{
"presets": [
[
"@babel/env",
{
"targets": "> 2%, not dead"
}
]
],
"plugins": ["@babel/plugin-proposal-optional-chaining"]
}
- 다음과 같이 babel.config.json파일을 생성해 적용하면 됩니다.
- presets에는 바벨에 대한 설정을 넣을 수 있는데 다음 코드는 전세계 2%이상의 점유율을 가진 브라우저에서 동작 가능하도록 설정한 옵션입니다.
- 이런식으로 브라우저 점유율을 통해 설정을 할 수도 있고 각 브라우저(크롬, 사파리 등)마다 버전을 지정해 설정해줄 수 도 있습니다.
반응형
'프로그래밍 개발 > 프론트엔드 개발자 기본 지식' 카테고리의 다른 글
AJAX (Asynchronous Javascript And XML) (0) | 2022.04.17 |
---|---|
HTML/CSS (0) | 2022.04.12 |
Webpack 웹팩 (0) | 2022.04.12 |
Npm (0) | 2022.04.12 |
ECMAScript2015(ES6) (0) | 2022.04.10 |
댓글