📖 docs&guides(참고):

<aside> 💡 자바스크립트를 공부합니다👩‍🏫 연휴 동안 공부하기!

깃허브 문서 링크(토글)

</aside>

목표	자바스크립트 개념 공부하기
주제	Babel, Polyfilling & Transpiling
난이도	🥚🐣🐥🐓

<aside> 💡 목차

</aside>

자바스크립트 part5

연휴 동안 자바스크립트를 공부합니다.
part5는 Babel과 Transpiling & Polyfilling에 대한 내용입니다.

Babel

https://babeljs.io/

플러그인 : https://babeljs.io/docs/en/plugins

프리셋 : https://babeljs.io/docs/en/presets

Babel이란?

Babel은 최신 JavaScript 구문을 호환되는 이전 버전의 JavaScript로 변환하는 도구입니다. (트랜스파일링)
모던 브라우저를 지원하지 않는 이전 버전의 브라우저에서도 사용 가능하도록 만듭니다.
- 플러그인과 프리셋을 사용합니다.

플러그인 & 프리셋

바벨은 JavaScript 코드를 트랜스파일 할 때 사용하는 플러그인과 프리셋이라는 두 가지 요소로 구성됩니다.

플러그인(plugins) : 특정 기능을 추가하거나 지원하는 도구로, 예를 들어 "class properties"를 지원하는 플러그인이 있거나 "decorators"를 지원하는 플러그인이 있습니다. 이러한 플러그인들은 추가적인 설정을 필요로 하며, 필요한 기능만 선택적으로 추가할 수 있습니다.

프리셋(presets) : 이것들은 특정 버전의 JavaScript나 특정 기능 집합을 지원하기 위해 함께 작동하도록 설계된 플러그인의 집합입니다. 예를 들어, 최신 버전의 JavaScript의 모든 기능을 지원하는 프리셋이 있거나, JavaScript 버전 ES2015의 모든 기능을 지원하는 프리셋이 있을 수 있습니다. 프리셋은 한번에 여러 플러그인을 추가하는 편리한 방법으로 자주 사용됩니다.

종류	내용	예시
플러그인	특정 단일 js 기능을 추가하거나 지원하는 도구 (코드 자체를 ES5로 변환함)	const ⇒ var, class properties
프리셋	특정 버전의 JavaScript나 특정 기능 집합을 지원, 플러그인의 집합	promise, async & await

1. Parcel과 Babel

<aside> 👉 정확한 config과, 지원하는 브라우저를 설정하는 것은 복잡할 수 있습니다. parcel은 기본값을 토대로 자동으로 babel을 적용합니다.

또한, .babelrc 파일을 사용하여, 자세한 설정을 적용할 수 있습니다.

.babelrc

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

package.json

{
  "name": "my-project",
  "dependencies": {
    "@babel/preset-env": "^7.12.1"
  },
  "babel": {
    "presets": [
      "@babel/preset-env"
    ]
  }
}

</aside>