Babel 시작하기 - 자바스크립트 변환

Babel은 JavaScript용 범용 다목적 컴파일러입니다. Babel을 사용하면 차세대 JavaScript와 차세대 JavaScript 도구를 만들 수 있습니다.

언어로서의 JavaScript는 항상 새로운 기능과 함께 새로운 사양과 제안이 나오면서 끊임없이 진화하고 있습니다. Babel을 사용하면 이러한 기능을 모든 곳에서 사용할 수 있기 몇 년 전에 사용할 수 있습니다.

Babel은 최신 표준으로 작성된 JavaScript 코드를 오늘날 모든 곳에서 작동하는 버전으로 컴파일하여 이를 수행합니다. 이 프로세스를 소스 간 컴파일이라고도 하며 발생이라고도 합니다. Source: Jamie Kyle

바벨이란?

바벨은 자바스크립트 컴파일러로 자바스크립트를 자바스크립트로 컴파일하는 것을 의미하며,
babel은 여러 단계로 나뉩니다.

입력 소스 코드

변형된 AST

원본 AST 생성 중

출력 소스 코드

이것은 세 가지 다른 패키지에 의해 수행됩니다

/파서

/트래버스

/generator, 그들은 모두 간단한 API를 제공하는 babel-core 안에 있습니다. 프로그램을 컴파일하기 위해 세 가지 다른 패키지를 사용하는 것은 유휴 상태가 아니므로 쉽게 만들 수 있도록 하나의 패키지로 대략적으로 정리했습니다.

babel-parser에 대해 이야기하기

Babel 파서는 여러 단계로 나뉩니다.

어휘 분석 :
입력 소스 코드를 토큰 목록으로 변환

var age = 10;

/* var age = 7;

이 단계에서 잘못된 리터럴에 대한 오류를 보고하거나 챕터를 초대합니다. 예를 들어 비외상적인 댓글이나 문자열이 있는 경우 이해가 되지 않는 챕터가 있는 경우 오류를 보고합니다.

구문 분석:
어휘 분석 중에 생성된 토큰 목록을 가져오고 추상 구문 트리를 빌드합니다.

시맨틱 분석:
AST가 초기 오류라고 하는 모든 정적 ECMAScript 규칙을 준수하는지 확인하고 범위 추적기를 사용하여 유효하지 않은 변수에 대한 오류를 보고합니다.

바벨의 특징

Babel이 여러분을 위해 할 수 있는 주요 작업은 다음과 같습니다.

변환 구문

대상 환경에서 누락된 Polyfill 기능(core-js와 같은 타사 polyfill을 통해)

소스 코드 변환

프리셋

Babel 사전 설정은 Babel 플러그인 및/또는 구성 옵션의 공유 가능한 세트 역할을 할 수 있습니다.
공통 환경을 위한 몇 가지 사전 설정을 구성했습니다.

ES2015+ 구문 컴파일을 위한/preset-env

TypeScript용/preset-typescript

/React용 사전 설정 반응

Flow용/preset-flow

구성 파일

Babel에는 함께 또는 독립적으로 사용할 수 있는 두 가지 병렬 구성 파일 형식이 있습니다.

프로젝트 전체 구성

확장자가 .json, .js, .cjs, .mj인 babel.config.* 파일

파일 관련 구성

.babelrc.* 파일, 확장자는 .json, .js, .cjs, .mjs입니다.

확장자가 없는 .babelrc 파일입니다.

'babel' 키가 있는 package.json 파일.

무엇 향후 계획?

이제 babel이 Javascript를 변환하는 방법의 기본 사항을 알게 되었습니다. 당신은 그것이 무엇인지, 그것이 왜 유용할 수 있는지 알고 있습니다. 그러나 직접 경험하는 것보다 더 확신을 주는 것은 없습니다. 더 많은 이해를 위해 다음을 확인할 수 있습니다.

바벨 공식 홈페이지 : Link here ✌️

Jamie Kyle 작성 Babel 사용자 핸드북 : Link here ✌️

읽어 주셔서 감사합니다

언제든지 내 이메일 뉴스레터를 구독하고 Connect with me