바벨이란 무엇입니까? *바벨

바벨 자바 스크립트 컴파일러

바벨은 여러가지 툴을 주로 사용되는 변환 ECMAScript2015 년+코드로 호환되는 버전의 자바스크립트가 현재 및 이전 버전의 브라우저 또는 환경입니다. 여기에 주요 것들이 바벨 당신을 위해 할 수 있습니다:

변환 syntax
Polyfill 기능이 있는 누락에서 당신의 대상 환경(을 통해@babel/polyfill)
소스 코드를 변환(codemods)
더! (이러한 체크 아웃에 대한 동영상의 영감)

// Babel Input: ES2015 arrow function.map((n) => n + 1);// Babel Output: ES5 equivalent.map(function(n) { return n + 1;});

한 튜토리얼에 컴파일러를 확인하 슈퍼 작 컴파일러는 방법에 대해서도 설명합니다 Babel 자체에서 작동하는 높은 수준입니다.

ES2015 이상

Babel 은 구문 변압기를 통해 최신 버전의 JavaScript 를 지원합니다.

이러한 플러그인을 사용하면 브라우저 지원을 기다리지 않고 지금 당장 새로운 구문을 사용할 수 있습니다. 시작하려면 사용 가이드를 확인하십시오.

JSX 및 React

Babel 은 JSX 구문을 변환 할 수 있습니다! 시작하기 위해 반응 사전 설정을 확인하십시오. 과 함께 사용하여 바벨-숭고한 패키지를 가지고 구문 강조를 완전히 새로운 수준이다.

설치할 수 있습니다 이전 설정

npm install --save-dev @babel/preset-react

를 추가@babel/preset-react귀하의 Babel 구성이 있습니다.

export default React.createClass({ getInitialState() { return { num: this.getRandomNumber() }; }, getRandomNumber() { return Math.ceil(Math.random() * 6); }, render() { return <div> Your dice roll: {this.state.num} </div>; }});

에 대해 더 알아보 JSX

유형 주석(의 흐름과 호환되지 않습니)

바벨할 수 있는 지구는 입석! 시작하기 위해 흐름 사전 설정 또는 TypeScript 사전 설정을 확인하십시오. Babel 은 유형 검사를하지 않는다는 것을 명심하십시오;여전히 Flow 또는 TypeScript 를 설치하고 사용하여 유형을 확인해야합니다.

설치할 수 있는 흐름은 사전 설정과 함께

npm install --save-dev @babel/preset-flow

// @flowfunction square(n: number): number { return n * n;}

또는 타이프 라이터전 설정

npm install --save-dev @babel/preset-typescript

function Greeter(greeting: string) { this.greeting = greeting;}

에 대해 더 알아보의 흐름과 호환되지 않

플러그형

바벨서 건축되는 플러그인입니다. 기존 플러그인을 사용하여 자체 변환 파이프 라인을 작성하거나 직접 작성하십시오. 사전 설정을 사용하거나 생성하여 플러그인 세트를 쉽게 사용할 수 있습니다. 자세히 알아보기→

와 함께 즉석에서 플러그인 만들기 astexplorer.net 또는 generator-babel-plugin 을 사용하여 플러그인 템플릿을 생성하십시오.

// A plugin is just a functionexport default function ({types: t}) { return { visitor: { Identifier(path) { let name = path.node.name; // reverse the name: JavaScript -> tpircSavaJ path.node.name = name.split('').reverse().join(''); } } };}

디버깅

Source 지도를 지원할 수 있도록 디버깅 코드를 컴파일습니다.

사양 준수

Babel 은 합리적으로 가능한 한 ECMAScript 표준에 충실하려고합니다. 또한 성능에 대한 절충안으로 더 많은 사양을 준수 할 수있는 특정 옵션이있을 수 있습니다.

Compact

Babel 은 부피가 큰 런타임에 의존하지 않고 가능한 최소량의 코드를 사용하려고합니다.

이 어려울 수 있습을 할 경우에,거기에는”느슨한”옵션이 특정 변환할 수 있는 단점이 사양을 따르기 쉽게 읽을 수 있도록,파일 크기,속도입니다.

바벨이란?