영문 사이트: https://babeljs.io/docs/en/usage
babel 툴체인에는 엔드유저(최종 사용자)이든 babel 자체의 통합을 구축하든 babel을 쉽게 사용할 수 있도록 하는 도구가 꽤 많습니다. 이제 이러한 도구에 대해 간단히 소개하겠습니다.
아래의 내용을 간단하게 요약해 보았습니다.
- babel: 새로운 문법이나 타입스크립트 혹은 JSX 같은 다른 언어로 분류되는 언어들에 대해서도 모든 브라우저에서 동작할 수 있도록 호환성을 지켜줍니다. 즉, 위와 같은 기술들이 모든 브라우저에서 작동되는 하위버전의 자바스크립트 언어로 변환되는 자바스크립트 컴파일러이다.
babel 버전 7이후로는 @bable모듈 아래로 필요한 모듈들이 세분화 되어 npm에 배포되어 있다.
- pugin: 바벨에게 코드변환을 수행하는 방법을 알려주는 작은 자바스크립트 프로그램
- preset: 플러그인들의 집합체
- configure file: 터미널에서 cli와 presets 옵션을 모두 실행하는 대신 옵션을 전달하는 다른 방법으로 babel.config.js라는 파일에서 옵션을 설정한다.
- polyfill: 변경된 표준을 준수할 수 있게 기존 함수의 동작 방식을 수정하거나 새롭게 구현을 해서 누락된 새로운 기능을 메꿔주는 역할을 한다.
polyfill이 이해가 가지 않는다.
명쾌한 설명이 있어서 참고한다.https://minsoftk.tistory.com/82
Pollyfill이란? Babel이란?
21.11.22 내용 수정 && 프로젝트 내용 추가 Polyfill? 웹 접근성과 Web Vitals에 대한 공부를 하다가 이해가 안 가는 개념이 있었다. First Input Delay(FID)라는 최초 입력 지연의 최적화를 공부하면서 Total Block
minsoftk.tistory.com
ES6에서 새롭게 등장한 Promise와 같이 ES5에서 변환할 수 있는 대상이 없을 경우엔 에러가 발생하기 때문에 이 경우엔 Polyfill이 사용된다.
Babel과 Polyfill은 하는 역할이 다르지만 웹 호환성을 관점에서 바라보면 큰 차이가 없는 기능이다.
OVERVIEW
이 가이드는 ES2015+ 구문을 사용하는 Javascript 응용 프로그램 코드를 현재 브라우저에서 작동하는 코드로 컴파일하느 방법을 보여줍니다. 여기에는 새로운 구문 변환과 누락된 기능을 폴리핑하는 작업이 모두 포함됩니다.
이 설정을 위한 전체 프로세스는 다음과 같습니다.
1. 패키지 설치를 위해 아래의 구문을 실행합니다.
npm install --save-dev @babel/core @babel/cli @babel/preset-env
2. 아래의 내용으로 프로젝트 루트에 babel.config.json(v7.8.0이상 필요)이라는 구성 파일을 생성합니다.
{
"presets": [
[
"@babel/preset-env",
{
"targets": {
"edge": "17",
"firefox": "60",
"chrome": "67",
"safari": "11.1"
},
"useBuiltIns": "usage",
"corejs": "3.6.5"
}
]
]
}위의 브라우저 리스트는 임의의 예입니다. 지원하려는 브라우저에 맞게 조정해야 합니다. 자세한 @babel/preset-env 옵션은 여기를 참조하십시오.
3. src 폴더의 코드를 lib 폴더로 컴파일 하기 위해서 아래의 구문을 실행합니다.
./node_modules/.bin/babel src --out-dir libnpm@5.2.0과 함께 제공되는 npm패키지 러너를 사용하여 ./node_modules/.bin/babel을 npx babel로 대체하여 해당 명령을 단축할 수 있습니다.
위의 작동 방식에 대한 단계별 설명과 사용된 각 도구에 대한 소개를 보려면 계속 읽어 보십시오.
CLI 기본 사용방법
@babel아래에 필요한 모든 바벨 모듈이 세분화된 npm패키지로 배포되어있습니다.(version 7이후) 이 모듈식 설계는 각각 특정 사용 사례를 위해 설계되어 다양한 도구를 제공합니다. @babel/core과 @babel/cli를 봅시다.
Core Library
바벨의 핵심 기능은 @babel/core 모듈에 있습니다. 아래의 구문으로 설치합니다.
npm install --save-dev @babel/core자바스크립트 프로그램에서는 이 모듈이 직접적으로 필요하며 아래와 같이 사용할 수 있습니다.
const babel = require("@babel/core");
babel.transformSync("code", optionsObject);
CLI tool
@babel/cli는 터미널에서 바벨을 사용할 수 있게 하는 도구입니다. 아래의 구문을 입력해서 사용해 봅시다.
npm install --save-dev @babel/core @babel/cli
./node_modules/.bin/babel src --out-dir lib위 구문은 src 폴더에 있는 모든 자바스크립트 파일을 구문 분석하고 변환을 적용해 각 파일을 lib 폴더에 출력합니다. 아직 변환을 적용하라고 하지 않았기 때문에 출력 코드는 입력과 동일합니다(코드 스타일은 요지되지 않음). 옵션을 설정하여 원하는 변환을 지정할 수 있습니다.
위에 --out-dir 옵션을 사용했습니다. -help를 실행하면 cli 도구에서 허용하는 나머지 선택사항을 확인할 수 있습니다.
Plugins & Presets
변환은 플러그인 형태로 나타나는데, 플러그인은 바벨에게 코드 변환을 수행하는 방법을 알려주는 작은 자바스크립트 프로그램입니다. 코드에 원하는 변환을 적용하기 위해 자신만의 플러그인을 작성할 수도 있습니다. ES2015+ 구문을 ES5로 변환하기 위해 @babel/plugin-transform-arrow-functions와 같은 공식 플러그인에 의존할 수도 있습니다.
npm install --save-dev @babel/plugin-transform-arrow-functions
./node_modules/.bin/babel src --out-dir lib --plugins=@babel/plugin-transform-arrow-functions이제 코드의 모든 화살표 함수가 ES5 호환 함수 표현식으로 변환됩니다.
const fn = () => 1;
// 변환 후
var fn = function fn() {
return 1;
};좋습니다! 하지만 코드에는 변환을 원하는 다른 ES2015+ 기능이 있기 때문에 원하는 플러그인을 하나씩 추가하는 플러그인 집합인 preset을 사용할 수 있습니다.
플러그인처럼, preset 또한 필요한 플러그인 조합인 자신만의 preset을 만들수 있습니다. 여기 사용 사례에는 env라는 훌륭한 preset이 있습니다.
npm install --save-dev @babel/preset-env
./node_modules/.bin/babel src --out-dir lib --prsets=@babel/env이 preset에는 모던 자바스크립트(ES2015, ES2016 등)를 지원하는 모든 플러그인이 포함됩니다. 그리고 presets에는 옵션도 있습니다. 터미널에서 cli와 presets옵션을 모두 실행하는 대신 옵션을 전달하는 다른 방법인 구성 파일을 살펴봅시다.
Configuration
필요에 따라 구성 파일을 사용하는 몇 가지 방법이 있습니다. 자세한 내용은 babel을 구성하는 방법에 대한 자세한 안내서를 참조하십시오.
babel.config.js(v7.8.0 이후)라는 파일을 생성하고 아래의 내용을 입력합니다.
{
"presets": [
[
"@babel/preset-env",
{
"targets": {
"edge": "17",
"firefox": "60",
"chrome": "67",
"safari": "11.1"
}
}
]
]
}이제 env preset은 대상 브라우저에서 사용할 수 없는 기능에 대한 변환 플러그인만 로드합니다. 이제 구문에 대한 모든 준비가 완료되었습니다.
Polyfill
바벨 7.4.0부터는 core-js/stable을 포함하지 않습니다.
import "core-js/stable";7.18.0 이후 버전의 @babel/core 또는 @babel/plugin-trnasform-regenerator를 사용하여 generator와 비동기 함수를 ES5로 컴파일한다면 regenerator 런타임 패키지를 로드해야합니다.
@babel/polyfill 모듈은 ES2015+ 환경을 모방하기 위한 core-js와 사용자 지정 재생기 런타임(custom regenerator runtime)을 포함합니다.
이것은 Promise또는 WeakMap와 같은 새로운 built-in들, Array.from 또는 Object.assign와 같은 정적 메서드, Array.prototype.include와 같은 인스턴스 메서드 및 제너레이터함수(재생기 플러그인과 함께 사용되는 경우)를 사용할 수 있습니다. 이를 위해 폴리필은 String과 같은 네이티브 프로토타입뿐만 아니라 글로벌 범위에 추가됩니다.
라이브러리/도구 작성자에게 이것은 너무 많은 것일 수 있습니다. Array.prototype.include와 같은 인스턴스 메서드가 필요하지 않은 경우 @babel/polyfill 대신 transform runtime 플러그인을 사용하여 글로벌 범위를 모두 오염시키지 않아도 됩니다.
한 단계 더 나아가서, 폴리필이 필요한 기능이 무엇인지 정확히 알고 있다면, core-js에서 직접 요구할 수 있다.
애플리케이션을 구축 중이므로 @babel/polyfill만 설치하면 됩니다.
npm install --save @babel/polyfill소스 코드 앞에서 실행해야 하는 폴리필이므로 --save-dev 대신 --save 옵션을 참고하십시오.
다행히도, "useBuiltIns" 옵션이 있는 env presets 설정을 사용하고 있습니다. "usage"로 설정하면 필요한 폴리필만 포함하는 위에서 언급한 마지막 최적화가 실질적으로 적용됩니다. 이 새 옵션을 사용하면 구성이 다음과 같이 변경됩니다.
{
"presets": [
[
"@babel/preset-env",
{
"targets": {
"edge": "17",
"firefox": "60",
"chrome": "67",
"safari": "11.1"
},
"useBuiltIns": "usage"
}
]
]
}이제 Babel이 모든 코드에서 대상 환경에 누락된 기능을 검사하고 필요한 폴리필만 포함합니다. 예를 들어 다음 코드는 다음과 같습니다.
Promise.resolve().finally();(Edge 17에는 Promise.prototype이 없기 때문에) 이렇게 됩니다.
require("core-js/modules/es.promise.finally");
Promise.resolve().finally();useBuiltIns 옵션이 "usage"(기본값은 "false")로 설정된 env presets 설정을 사용하지 않았다면 다른 코드보다 먼저 엔트리 포인트에서 전체 폴리필을 한 번만 요구해야 했습니다.
{
"presets": [
[
"@babel/preset-env",
{
"targets": {
"edge": "17",
"firefox": "60",
"chrome": "67",
"safari": "11.1"
},
"useBuiltIns": "entry"
}
]
]
}그런 다음 @babel/polyfill이 더 이상 사용되지 않으므로 전체 ES2015+ 환경을 에뮬레이트하기 위해 엔트리 파일에 core-js(ECMAScript 기능을 폴리필하려면)를 먼저 가져옵니다.
import "core-js/stable";터미널에서 @babel/cli를 사용하여 Babel을 실행하고, @babel/polyfill을 사용하여 모든 새로운 JavaScript 기능을 폴리필하고, env 사전 설정을 사용하여 대상 브라우저에 없는 기능에 대한 변환 및 폴리필만 포함했습니다.
빌드 시스템, IDE 등으로 Babel을 설정하는 방법에 대한 자세한 내용은 대화형 설정 가이드를 참조하십시오.