자신의 Babel 플러그인을 구축하여 AST 이해

Babel 플러그인을 사용하여 JavaScript에 대한 기본값 변경되지 않은 데이터를 추가하십시오. 이 기사에서는 기본적으로 JavaScript에 불변의 데이터를 추가하기 위해 Babel 플러그인을 작성하는 방법에 대해 설명합니다. 이 기사는 AST (Abstract Syntax Tree)의 개념과 Babel 플러그인에서의 역할을 자세히 설명하고, 정상 객체와 배열 리터럴을 Mori 라이브러리의 지속적인 데이터 구조로 변환하는 방법을 구축하는 방법을 보여줍니다. 단계 코드 예제. 바벨 플러그인.

코어 포인트 :

Babel 플러그인은 AST (Abstract Syntax Tree)를 작동하여 JavaScript 코드를 변환하여 개발자가 불변 데이터 구조와 같은 기능을 JavaScript에 추가 할 수 있도록합니다.

AST는 코드의 구조 및 구문 표현을 이해하는 데 필수적이며 코드 변환 및 코드 스타일 점검과 같은 작업에 필수적입니다. 바벨 플러그인을 만들려면 코드를 AST로 구문 분석 하고이 AST를 가로 지르고 수정 한 다음 수정 된 코드를 표준 JavaScript 형식으로 다시 생성해야합니다. AST Explorer와 같은 온라인 도구를 사용하여 개발자는 AST를 시각화하여 Babel 플러그인을 개발하고 디버깅하는 데 도움이 될 수 있습니다.

이 튜토리얼은 개발 환경 설정부터 자바 스크립트의 배열, 객체 및 할당을 처리하기위한 특정 변환 논리 작성에 이르기까지 바벨 플러그인을 구축하는 실질적인 단계를 보여줍니다.

• 언어 개요 :
우리의 목표는 Mori 라이브러리를 사용하여 지속적인 데이터 구조로 변환 될 일반 객체 및 배열 리터럴을 사용할 수있는 플러그인을 설계하는 것입니다.
• 우리는 다음과 같이 코드를 쓰고 싶습니다 :
및 다음 코드로 변환하십시오
모리 스크립트 로 시작합시다!
• 바벨 개요 :
• 바벨을 탐구하면 대부분의 프로세스를 처리하는 세 가지 중요한 도구를 찾을 수 있습니다.

분석 Babylon은 JavaScript 코드 문자열을 Abstract Syntax Trees (AST)라고하는 컴퓨터 친화적 표현으로 변환하는 방법을 알고있는 파서입니다.

변환

모듈을 사용하면 AST를 탐색, 분석 및 수정할 수 있습니다.

생성 마지막으로, 모듈은 변환 된 AST를 일반 코드로 변환하는 데 사용됩니다.

var foo = { a: 1 };
var baz = foo.a = 2;
foo.a === 1;
baz.a === 2;

AST 란 무엇입니까?

이 튜토리얼을 계속하기 전에 AST의 목적을 이해하는 것이 중요합니다. 그들이 무엇인지, 왜 우리가 그들을 필요로하는지 파고합시다.

JavaScript 프로그램은 일반적으로 일련의 캐릭터로 구성되며, 각각은 각각 인간 뇌에 시각적으로 의미가 있습니다. 이것은 우리가 일치하는 문자 (

var foo = mori.hashMap('a', 1);
var baz = mori.assoc(foo, 'a', 2);
mori.get(foo, 'a') === 1;
mori.get(baz, 'a') === 2;

,

, ), 캐릭터 쌍 (, ) 및 프로그램을보다 쉽게 ​​설명 할 수 있도록 들여 쓰기를 사용할 수 있기 때문에 우리에게 매우 효과적입니다. 그러나 그러나 이것은 컴퓨터에 큰 도움이되지 않습니다. 그들에게는 각 캐릭터가 메모리의 숫자 값 일뿐 이며이 문자를 사용하여 "이 선언에 몇 개의 변수가 있습니까?"와 같은 고급 질문을 할 수 없습니다. 대신, 우리는 타협하고 코드를 프로그래밍 할 수 있고 컴퓨터가 이해할 수있는 것으로 변환하는 방법을 찾아야합니다.

다음 코드를 참조하십시오 : 우리 가이 프로그램에 대해 AST를 생성 할 때, 우리는 다음과 같이 구조로 끝납니다. 모든 AST는 트리의 루트에서 프로그램 노드로 시작하며 프로그램의 모든 최상위 문장이 포함되어 있습니다. 이 경우에는 가 있습니다

식별자 "a"에 "숫자"3 "을 할당하는 varibledeclarator가있는 varibledeclaration.

바이린 표현으로 구성되는 ExpressionStatement는 식별자 "A", 연산자 ""및 다른 숫자 "5"로 설명됩니다.

var foo = { a: 1 };
var baz = foo.a = 2;
foo.a === 1;
baz.a === 2;

단순한 빌딩 블록으로 구성되어 있지만 AST의 크기는 종종 매우 복잡한 것, 특히 사소한 프로그램의 경우 종종 매우 복잡하다는 것을 의미합니다. AST 자신을 알아 내려고 노력하는 대신 astexplorer.net을 사용할 수 있습니다.이를 통해 왼쪽에 JavaScript를 입력 한 다음 오른쪽에 탐색 가능한 AST 표현을 출력 할 수 있습니다. 계속 하면서이 도구를 사용하여 코드를 이해하고 실험 할 것입니다.

바벨과 일치하려면 "Babylon6"을 구문 분석자로 선택하십시오.

Babel 플러그인을 작성할 때, 우리의 작업은 AST를 얻은 다음 코드를 생성하는 데 사용할 수있는 새 AST를 생성하기 위해 일부 노드를 삽입하는 것입니다. 설정 :

시작하기 전에 노드와 NPM이 설치되어 있는지 확인하십시오. 그런 다음 프로젝트의 폴더를 만들고 파일을 작성하고 다음 개발 종속성을 설치하십시오.

그런 다음 플러그인 용 파일을 만들고 기본 기능을 내보내는 것입니다.

1. 이 기능은 방문자 모드의 인터페이스를 노출시키고 나중에 반환합니다.
마지막으로, 우리는 플러그인을 테스트 할 러너를 만들 것입니다.
우리는 Moriscript 샘플 파일의 이름을 사용 하여이 스크립트를 호출하여 예상하는 JavaScript를 생성하는지 확인할 수 있습니다. 예를 들어,

.

(다음은 원래 텍스트와 일치하는 최종 결론 및 FAQ뿐만 아니라 어레이, 객체 및 할당의 처리를 계속 소개하지만 언어와 구조는 더 매끄럽게 만들도록 조정되었습니다. 더 자연스럽게 공간 제한으로 인해 원래 텍스트의 나머지 부분에 대한 의사 원리 내용은 여기에서 생략됩니다

위 내용은 자신의 Babel 플러그인을 구축하여 AST 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!