바벨 초보자 가이드

이 기사에서는 개발자가 차세대 자바스크립트를 사용할 수 있도록 하는 자바스크립트 컴파일러인 바벨을 소개합니다.

웹 응용 프로그램을 빌드 할 때 자바 스크립트를 작성하는 것은 실망 스러울 수 있습니다. 우리는 우리가 타겟팅하는 브라우저에서 사용할 수있는 기능과 기능이 구현되지 않을 때 어떤 일이 발생하는지에 대해 생각해야합니다. 어떤 사람들은 단순히 그것을 사용하지 않는 것이 좋습니다,이는 우리가 복잡한 무언가를 구축하는 경우 대부분의 시간 고통스러운 경험이다.

고맙게도,일부 도구를 사용하면 지원되는 것에 대해 걱정하지 않고 우리가 할 수있는 최선의 코드를 작성할 수 있습니다. 그들은 트랜스 파일러라고 불립니다. 트랜스파일러는 소스 코드를 입력으로 사용하고 새 소스 코드를 출력으로 생성하는 도구입니다.

바벨은 현대 자바스크립트(2015+)를 이전 브라우저에서 실행되는 호환 가능한 구현으로 번역하는 표준 트랜스파일러입니다. 당신은 단지 자바 스크립트를 작성에 집중하려는 경우는 완벽한 솔루션입니다.

바벨의 주요 목표는 이전 브라우저 또는 때로는 현재 브라우저에 대한 최신 표준을 번역하는 것이지만 더 많은 작업을 수행 할 수 있습니다. 뿐만 아니라 표준이 아닌 기능을 추가 할 수 있도록 사전 설정 및 플러그인의 생태계가있다. 각 플러그인은 코드에 사용할 수있는 새로운 기능/변환을 만들고,사전 설정은 플러그인의 단지 모음입니다.

시작하기

프로젝트와 사용하는 도구에 따라 바벨을 설정하는 방법에는 여러 가지가 있습니다. 이 글에서,우리는 당신이 빌드 시스템이나 프레임 워크를 사용하는 경우,당신은 공식 사이트에 대한 구체적인 지침을 확인할 수 있지만,클리를 사용하여 바벨을 설정하는 방법을 설명 할 것입니다. 따라서 처음 사용하는 사용자라면 언제든지 계속 진행할 수 있습니다.

프로젝트에서 바벨을 설정하는 첫 번째 단계는 다음을 사용하여 패키지를 설치하고 개발 종속성으로 추가하는 것입니다. 작업 노드가 있다고 가정합니다.그것은 단지 터미널에서 다음을 실행 하는 문제:

mkdir babel-testcd babel-testnpm init -ynpm install --save-dev babel-cli

이 디렉토리를 생성한다(babel-test)디렉토리로 변경,초기화한다(따라서package.json파일을 생성)다음 개발 종속성으로 바벨 클리를 설치합니다.

위의 도움이 필요한 경우,노드 설치 및 작업에 대한 자습서를 참조하십시오.

다음으로package.json을 열고build명령을 추가 할 수 있습니다.:

"scripts": { "build": "babel src -d dist"}

그러면src디렉터리에서 소스 파일을 가져와dist디렉터리에 결과를 출력합니다. 그런 다음 우리는 그것을 다음과 같이 실행할 수 있습니다:

npm run build

하지만 기다려! 바벨을 실행하기 전에 우리는 설치하고 우리의 코드를 변환 할 플러그인을 설정해야합니다. 이 작업을 수행하는 가장 쉽고 빠른 방법은 당신이 나타내는 대상 브라우저에 따라 적절한 플러그인을 선택 환경 사전 설정을 추가하는 것입니다. 다음을 사용하여 설치할 수 있습니다:

npm install babel-preset-env --save-dev

그런 다음 프로젝트 루트에.babelrc파일을 만들고 사전 설정을 추가합니다:

{ "presets": }

.babelrc파일은 바벨에 대한 모든 설정을 넣어 장소입니다. 당신은 사전 설정 및 플러그인을 설정하기 위해 주로이 사용하게 될 것입니다,하지만 더 많은 옵션을 사용할 수 있습니다. 당신은 바벨 아피 페이지에서 전체 목록을 확인할 수 있습니다.

운영 체제에 따라 점으로 시작하는 파일은 기본적으로 숨겨집니다. 이것이 당신에게 문제가있는 경우(또는 더 적은 수의 파일을 선호하는 경우),다음과 같이babel키 아래의package.json파일에 바벨 설정을 넣을 수 있습니다:

{ "name": "babel-test", "version": "1.0.0", "babel": { // config }}

마지막으로,바벨이 찾을 것으로 예상되는 디렉토리와 파일을 만들어 보겠습니다:

mkdir src dist

그리고 그것을 변형시킬 무언가를 제공하십시오:

let a = 1;let b = 2; = ;console.log(a);console.log(b);

이 예제에서는 소멸 할당을 사용하여 두 변수의 값을 바꿉니다.

바벨 실행

이제 바로 사용할 수 있는 바벨 설치가 있으므로build명령을 실행하여 컴파일 프로세스를 실행할 수 있습니다:

npm run build

이 코드는src/main.js에서 가져온 다음 변환 된 코드를dist/main.js로 출력합니다.

:

"use strict";var a = 1;var b = 2;var _ref = ;a = _ref;b = _ref;console.log(a);console.log(b);

보시다시피let은var로 대체되었으며 바벨은 스왑을 용이하게하기 위해 임시 변수(밑줄로 표시)를 도입했습니다.

그게 다야. src디렉터리에 작성한 코드가 이전 버전의 언어로 번역됩니다. 기본적으로 사전 설정에 옵션을 추가하지 않으면 모든 변환이 로드됩니다. 다음과 같이 대상 브라우저를 지정할 수도 있습니다:

{ "presets": } }] ]}

이 버전 7 에 크거나 동일한 각 브라우저와 사파리의 최신 두 버전을 지원하는 데 필요한 변환을로드합니다. 브라우저 목록 저장소에서 대상 브라우저에 사용할 수 있는 옵션을 찾을 수 있습니다.

바벨 생태계: 빠른 개요

이전 섹션에서 알았 듯이,당신이 그것을 설치할 때 바벨은 그 자체로 아무것도하지 않습니다. 우리는 원하는 동작을 얻기 위해 플러그인 세트를 설치해야,또는 우리는 사전 설정을 사용할 수 있습니다,플러그인의 미리 정의 된 집합입니다.

일반적으로 포함하려는 각 기능은 플러그인 형태로 제공됩니다. 2015 에 대한 몇 가지 예는 다음과 같습니다:

• 상수
• 화살표 함수
• 블록 범위 함수
• 클래스
• 스프레드
• 템플릿 리터럴

플러그인 참조 전체 목록에 대한 바벨 문서의 페이지.

그러나 때때로 당신은 모든 플러그인 하나 하나를 포함하고 싶지 않아요. 그래서 각 플러그인을 설치하는 과정을 용이하게 미리 만들어진 사전 설정이 있습니다.

현재 사용 가능한 세 가지 공식 사전 설정은 다음과 같습니다:

• 엔스
• 반응
• 흐름

엔스가 가장 자주 사용되며 여기에서 사용한 엔스입니다. 그것은 자동으로 대상 브라우저에 따라 코드를 호환하기 위해 필요한 모든 변환을로드합니다.

리액트 프리셋은 리액트 프로젝트에서 일반적으로 발견되는 코드를 변환한다.

마지막으로 흐름 사전 설정은 흐름 유형 주석에서 코드를 정리하는 데 사용됩니다(유형이 유효한지 여부를 확인하지는 않지만).)

바벨 폴리필

구문 적으로 변환 할 수없는 자바 스크립트 기능이 있습니다.

이러한 종류의 기능은 코드에서 사용할 라이브러리에 의해 브라우저에서 구현되어야하며,이는 폴리필의 작업입니다.

바벨 폴리필은 코어-제이와 재생기 런타임에 의해 구성된다. 함께,그들은 2015+의 모든 기능을 다룹니다.

고급 사용

언급 한 바와 같이,바벨은 아직 언어로 구현되지 않은 기능을 변환하는 데 사용할 수 있습니다. 이에 대한 좋은 예는 클래스 필드 제안입니다. 이는 특정 구성 요소에 메서드를 명시적으로 바인딩해야 할 필요성을 없애고 구성 요소의state를 클래스 필드로 선언 할 수 있기 때문에 반응 개발자들 사이에서 특히 인기가 있습니다(잠재적으로 생성자가 필요 없음).

오늘 클래스 필드를 사용하고자하는 사람들을 위해,당신은 바벨 플러그인 변환 클래스 속성을 개발 종속성으로 추가해야합니다:

npm install --save-dev babel-plugin-transform-class-properties

또한.babelrc파일을 다음과 같이 업데이트합니다:

{ "presets": , "plugins": }

이제 쓸 수 있습니다:

class App extends Component { state = { count: 0 }; incCount = () => { this.setState(ps => ({ count: ps.count + 1 })); }; render() { return ( <div> <p>{ this.state.count }</p> <button onClick={this.incCount}>add one</button> </div> ); }}

그리고 거기서 멈추지 않습니다. 당신은 또한 당신의 자신의 바벨 플러그인을 구축하여 우리의 튜토리얼 이해 흉내 보여으로,언어에 자신의 새로운 기능을 추가 할 바벨을 사용할 수 있습니다.

대안

현대 웹 응용 프로그램을 작성하는 것은 때때로 자바 스크립트에서 사용할 수있는 기능 이상을 필요로한다. 다른 언어는 호환 자바 스크립트로 번역뿐만 아니라 다른 유용한 기능을 구현할 수 있습니다.

가장 인기 있는 옵션은 타이프 스크립트입니다.

다른 극단에서는 퓨어스크립트와 같은 기능적 언어부터 다트와 같은 객체지향에 이르기까지 다양한 범주에 걸쳐 완전히 다른 언어들이 존재한다.

대체 언어에 대한 더 깊은 개요를 보려면 자바 스크립트로 컴파일되는 10 개 언어를 살펴보십시오.

결론

바벨은 여전히 모든 개발자와 코드가 실행해야하는 브라우저의 넓은 범위에 의해 이해 될 수있는 자바 스크립트를 제공하면서 현대적인 응용 프로그램을 작성하기위한 훌륭한 옵션입니다.

바벨은 브라우저와 노드와 같은 플랫폼 모두에서 2015+를 이전 버전의 언어로 변환하는 데 유용할 뿐만 아니라.또한 표준의 일부가 아닌 새로운 기능을 추가하기위한 것입니다. 내가 무슨 뜻인지 확인하려면,그냥 사용 가능한 모든 바벨 플러그인 또는 사전 설정을 찾기 위해 전인대 디렉토리를 살펴.

자바스크립트가 빠른 속도로 진화하고 있기 때문에 브라우저 제조업체들은 최신 기능을 구현하기 위해 잠시 시간이 필요할 것입니다. 바벨에게 툴킷에 자리를 제공하는 것은 당신이 당신의 사용자 중 하나를 포기하지 않는 지식 안전,오늘 최첨단 자바 스크립트를 작성할 수 있다는 것을 의미한다. 사랑하지 않는 것은 무엇입니까?