AST는 코드의 구조 및 구문 표현을 이해하는 데 필수적이며 코드 변환 및 코드 스타일 점검과 같은 작업에 필수적입니다.
바벨 플러그인을 만들려면 코드를 AST로 구문 분석 하고이 AST를 가로 지르고 수정 한 다음 수정 된 코드를 표준 JavaScript 형식으로 다시 생성해야합니다.
AST Explorer와 같은 온라인 도구를 사용하여 개발자는 AST를 시각화하여 Babel 플러그인을 개발하고 디버깅하는 데 도움이 될 수 있습니다.
이 튜토리얼은 개발 환경 설정부터 자바 스크립트의 배열, 객체 및 할당을 처리하기위한 특정 변환 논리 작성에 이르기까지 바벨 플러그인을 구축하는 실질적인 단계를 보여줍니다.
-
언어 개요 :
우리의 목표는 Mori 라이브러리를 사용하여 지속적인 데이터 구조로 변환 될 일반 객체 및 배열 리터럴을 사용할 수있는 플러그인을 설계하는 것입니다. -
우리는 다음과 같이 코드를 쓰고 싶습니다 :
및 다음 코드로 변환하십시오
-
모리 스크립트 로 시작합시다! -
바벨 개요 :
-
바벨을 탐구하면 대부분의 프로세스를 처리하는 세 가지 중요한 도구를 찾을 수 있습니다.
분석
Babylon은 JavaScript 코드 문자열을 Abstract Syntax Trees (AST)라고하는 컴퓨터 친화적 표현으로 변환하는 방법을 알고있는 파서입니다.
변환
모듈을 사용하면 AST를 탐색, 분석 및 수정할 수 있습니다.
생성
마지막으로, 모듈은 변환 된 AST를 일반 코드로 변환하는 데 사용됩니다.
<code class="language-javascript">var foo = { a: 1 };
var baz = foo.a = 2;
foo.a === 1;
baz.a === 2;</code> AST 란 무엇입니까?
이 튜토리얼을 계속하기 전에 AST의 목적을 이해하는 것이 중요합니다. 그들이 무엇인지, 왜 우리가 그들을 필요로하는지 파고합시다.
JavaScript 프로그램은 일반적으로 일련의 캐릭터로 구성되며, 각각은 각각 인간 뇌에 시각적으로 의미가 있습니다. 이것은 우리가 일치하는 문자 (<code class="language-javascript">var foo = mori.hashMap('a', 1);
var baz = mori.assoc(foo, 'a', 2);
mori.get(foo, 'a') === 1;
mori.get(baz, 'a') === 2;</code>, , ), 캐릭터 쌍 (, ) 및 프로그램을보다 쉽게 설명 할 수 있도록 들여 쓰기를 사용할 수 있기 때문에 우리에게 매우 효과적입니다. 그러나 그러나 이것은 컴퓨터에 큰 도움이되지 않습니다. 그들에게는 각 캐릭터가 메모리의 숫자 값 일뿐 이며이 문자를 사용하여 "이 선언에 몇 개의 변수가 있습니까?"와 같은 고급 질문을 할 수 없습니다. 대신, 우리는 타협하고 코드를 프로그래밍 할 수 있고 컴퓨터가 이해할 수있는 것으로 변환하는 방법을 찾아야합니다.
다음 코드를 참조하십시오 :
우리 가이 프로그램에 대해 AST를 생성 할 때, 우리는 다음과 같이 구조로 끝납니다.
모든 AST는 트리의 루트에서 프로그램 노드로 시작하며 프로그램의 모든 최상위 문장이 포함되어 있습니다. 이 경우에는 가 있습니다
식별자 "a"에 "숫자"3 "을 할당하는 varibledeclarator가있는 varibledeclaration.
바이린 표현으로 구성되는 ExpressionStatement는 식별자 "A", 연산자 ""및 다른 숫자 "5"로 설명됩니다.
<code class="language-javascript">var foo = { a: 1 };
var baz = foo.a = 2;
foo.a === 1;
baz.a === 2;</code>
단순한 빌딩 블록으로 구성되어 있지만 AST의 크기는 종종 매우 복잡한 것, 특히 사소한 프로그램의 경우 종종 매우 복잡하다는 것을 의미합니다. AST 자신을 알아 내려고 노력하는 대신 astexplorer.net을 사용할 수 있습니다.이를 통해 왼쪽에 JavaScript를 입력 한 다음 오른쪽에 탐색 가능한 AST 표현을 출력 할 수 있습니다. 계속 하면서이 도구를 사용하여 코드를 이해하고 실험 할 것입니다.
바벨과 일치하려면 "Babylon6"을 구문 분석자로 선택하십시오.
Babel 플러그인을 작성할 때, 우리의 작업은 AST를 얻은 다음 코드를 생성하는 데 사용할 수있는 새 AST를 생성하기 위해 일부 노드를 삽입하는 것입니다. 
설정 :
시작하기 전에 노드와 NPM이 설치되어 있는지 확인하십시오. 그런 다음 프로젝트의 폴더를 만들고 파일을 작성하고 다음 개발 종속성을 설치하십시오.
그런 다음 플러그인 용 파일을 만들고 기본 기능을 내보내는 것입니다.
-
이 기능은 방문자 모드의 인터페이스를 노출시키고 나중에 반환합니다.
마지막으로, 우리는 플러그인을 테스트 할 러너를 만들 것입니다. -
우리는 Moriscript 샘플 파일의 이름을 사용 하여이 스크립트를 호출하여 예상하는 JavaScript를 생성하는지 확인할 수 있습니다. 예를 들어,
.
(다음은 원래 텍스트와 일치하는 최종 결론 및 FAQ뿐만 아니라 어레이, 객체 및 할당의 처리를 계속 소개하지만 언어와 구조는 더 매끄럽게 만들도록 조정되었습니다. 더 자연스럽게 공간 제한으로 인해 원래 텍스트의 나머지 부분에 대한 의사 원리 내용은 여기에서 생략됩니다
설정 :