BabelJS-개요

BabelJS새로운 기능을 이전 표준으로 변환하는 JavaScript 트랜스 파일러입니다. 이를 통해 기존 및 새 브라우저에서 번거 로움없이 기능을 실행할 수 있습니다. 호주 개발자 인 Sebastian McKenzie는 BabelJS를 시작했습니다.

왜 BabelJS인가?

JavaScript는 브라우저가 이해하는 언어입니다. 우리는 Chrome, Firefox, Internet Explorer, Microsoft Edge, Opera, UC 브라우저 등 다양한 브라우저를 사용하여 애플리케이션을 실행합니다. ECMA Script는 JavaScript 언어 사양입니다. ECMA Script 2015 ES6는 모든 신규 및 기존 브라우저에서 잘 작동하는 안정적인 버전입니다.

ES5 이후에는 ES6, ES7 및 ES8이 있습니다. ES6는 모든 브라우저에서 완전히 지원되지 않는 많은 새로운 기능과 함께 출시되었습니다. ES7, ES8 및 ESNext (ECMA 스크립트의 다음 버전)에도 동일하게 적용됩니다. 이제 모든 브라우저가 출시 된 모든 ES 버전과 언제 호환 될 수 있을지는 불확실합니다.

ES6, ES7 또는 ES8 기능을 사용하여 코드를 작성할 계획이라면 새로운 변경 사항을 지원하지 않기 때문에 일부 오래된 브라우저에서 중단되는 경향이 있습니다. 따라서 코드에서 ECMA Script의 새로운 기능을 사용하고 가능한 모든 브라우저에서 실행하려면 ES5에서 최종 코드를 컴파일 할 도구가 필요합니다.

Babel동일한 작업을 수행하며 우리가 원하는 ECMA 스크립트 버전으로 코드를 변환하는 트랜스 파일러라고합니다. 코드를 변환하는 데 필요한 ECMA 버전을 구성하는 사전 설정 및 플러그인과 같은 기능이 있습니다. 개발자는 Babel을 사용하여 JavaScript의 새로운 기능을 사용하여 코드를 작성할 수 있습니다. 사용자는 Babel을 사용하여 코드를 변환 할 수 있습니다. 코드는 나중에 문제없이 모든 브라우저에서 사용할 수 있습니다.

The following table lists down the features available in ES6, ES7 and ES8 −

풍모	ECMA 스크립트 버전
Let + Const	ES6
화살표 기능	ES6
클래스	ES6
약속	ES6
발전기	ES6
반복자	ES6
모듈	ES6
구조화	ES6
템플릿 리터럴	ES6
향상된 개체	ES6
기본, 휴식 및 스프레드 속성	ES6
비동기-대기	ES7
지수 연산자	ES7
Array.prototype.includes ()	ES7
문자열 패딩	ES8

BabelJS는 다음 두 부분을 관리합니다.

transpiling
polyfilling

Babel-Transpiler는 무엇입니까?

Babel-transpiler는 최신 JavaScript의 구문을 이전 브라우저에서 쉽게 이해할 수있는 형식으로 변환합니다. 예를 들어 화살표 함수, const, let 클래스는 함수, var 등으로 변환됩니다. 여기서 구문, 즉 화살표 함수는 두 경우 모두 동일한 기능을 유지하는 일반 함수로 변환됩니다.

Babel-polyfill이란 무엇입니까?

약속,지도 및 포함과 같은 JavaScript에 추가 된 새로운 기능이 있습니다. 이 기능은 어레이에서 사용할 수 있습니다. 마찬가지로 바벨을 사용하여 사용하고 트랜스 파일하면 변환되지 않습니다. 새 기능이 메서드 또는 객체 인 경우 이전 브라우저에서 작동하도록 변환과 함께 Babel-polyfill을 사용해야합니다.

다음은 JavaScript에서 사용할 수있는 ECMA 스크립트 기능의 목록이며, 트랜스 파일 및 폴리 필이 가능합니다.

Classes
Decorators
Const
Modules
Destructing
기본 매개 변수
계산 된 속성 이름
개체 휴식 / 스프레드
비동기 함수
화살표 기능
나머지 매개 변수
Spread
템플릿 리터럴

ECMA Script features that can be polyfilled −

Promises
Map
Set
Symbol
Weakmap
Weakset
includess
Array.from, Array.of, Array # find, Array.buffer, Array # findIndex
Object.assign,Object.entries,Object.values

BabelJS의 특징

이 섹션에서는 BabelJS의 다양한 기능에 대해 알아 봅니다. 다음은 BabelJS의 가장 중요한 핵심 기능입니다.

Babel 플러그인

플러그인과 사전 설정은 Babel이 코드를 트랜스 파일하기위한 구성 세부 정보입니다. Babel은 코드가 실행될 환경을 알고 있다면 개별적으로 사용할 수있는 여러 플러그인을 지원합니다.

바벨 사전 설정

Babel 사전 설정은 플러그인 집합입니다. 즉, Babel이 특정 모드에서 트랜스 파일하도록 지시하는 babel-transpiler에 대한 구성 세부 정보입니다. 코드를 변환 할 환경이있는 사전 설정을 사용해야합니다. 예를 들어 es2015 사전 설정은 코드를 es5 로 변환합니다 .

바벨 폴리 필

트랜스 파일 할 수없는 메서드 및 객체와 같은 일부 기능이 있습니다. 이러한 경우에는 모든 브라우저에서 기능을 쉽게 사용할 수 있도록 babel-polyfill을 사용할 수 있습니다. 약속의 예를 살펴 보겠습니다. 기능이 이전 브라우저에서 작동하려면 polyfill을 사용해야합니다.

바벨 폴리 필

Babel-cli에는 명령 줄에서 코드를 쉽게 컴파일 할 수있는 여러 명령이 함께 제공됩니다. 또한 명령과 함께 사용할 플러그인 및 사전 설정과 같은 기능이있어 한 번에 코드를 쉽게 변환 할 수 있습니다.

BabelJS 사용의 장점

이 섹션에서는 BabelJS 사용과 관련된 다양한 이점에 대해 알아 봅니다.

BabelJS는 JavaScript에 새로 추가 된 모든 기능에 대한 하위 호환성을 제공하며 모든 브라우저에서 사용할 수 있습니다.
BabelJS는 다음 버전의 JavaScript (ES6, ES7, ESNext 등)를 가져 오기 위해 트랜스 파일 할 수 있습니다.
BabelJS는 gulp, webpack, flow, react, typescript 등과 함께 사용할 수있어 매우 강력하고 큰 프로젝트와 함께 사용하여 개발자의 삶을 쉽게 만들 수 있습니다.
BabelJS는 또한 react JSX 구문과 함께 작동하며 JSX 형식으로 컴파일 할 수 있습니다.
BabelJS는 플러그인, 폴리 필, babel-cli를 지원하여 큰 프로젝트를 쉽게 처리 할 수 있습니다.

BabelJS 사용의 단점

이 섹션에서는 BabelJS를 사용할 때의 여러 가지 단점에 대해 배웁니다.

BabelJS 코드는 코드를 트랜스 파일하는 동안 구문을 변경하므로 프로덕션에서 릴리스 될 때 코드를 이해하기 어렵습니다.
변환 된 코드는 원본 코드와 비교할 때 크기가 더 큽니다.
모든 ES6 / 7 / 8 또는 곧 출시 될 새로운 기능을 트랜스 파일 할 수있는 것은 아니며 이전 브라우저에서 작동하도록 polyfill을 사용해야합니다.

바벨 즈 공식 사이트입니다 https://babeljs.io/.