초록 구문 트리에서 노드를 수정하는 방법

내가 최근에 우연히 발견 한 가장 강력한 개념 중 하나는 추상 구문 나무 또는 AST에 대한 아이디어입니다. 연금술을 공부 한 적이 있다면 연금술사를위한 전체 동기는 과학적 또는 비전적인 방법을 통해 금으로 금으로 변모하는 방법을 발견하는 것이 었음을 기억할 것입니다.

ASTS는 그런 식입니다. ASTS를 사용하여 Markdown을 HTML, JSX로 JavaScript로 변환 할 수 있습니다.

ASTS가 유용한 이유는 무엇입니까?

경력 초기에 Find-and-Replace 방법을 사용하여 파일을 변경하려고했습니다. 이것은 결국 상당히 복잡해 졌기 때문에 정규 표현을 사용해 보았습니다. 나는 그 아이디어가 너무 부서지기 때문에 아이디어를 포기하게되었습니다. 누군가가 내가 예상하지 못한 방식으로 텍스트를 입력 할 것이기 때문에 앱은 항상 깨졌고 정기적 인 표현을 중단하여 전체 앱이 떨어질 수 있습니다.

이것이 어려운 이유는 HTML이 유연하기 때문입니다. 따라서 정규 표현식을 사용하여 구문 분석하기가 매우 어렵습니다. 이와 같은 문자열 기반 교체는 경기를 놓치거나 너무 많이 일치하거나 이상한 일을하여 무효 인 마크 업이 발생하여 페이지가 멍청하게 보이기 때문에 파손되기 쉽습니다.

반면에 ASTS는 HTML을 훨씬 더 구조화 된 것으로 바꾸어 텍스트 노드로 뛰어 들고 해당 텍스트 만 교체하거나 텍스트를 전혀 처리 할 필요없이 요소를 엉망으로 만드는 것이 훨씬 간단합니다.

이로 인해 순수한 문자열 기반 솔루션보다 AST 변환이 더 안전하고 오류가 덜 발생합니다.

ASTS는 무엇에 사용됩니까?

시작하려면 몇 줄의 Markdown을 사용하여 최소한의 문서를 살펴 보겠습니다. 이것은 Home.md라는 파일로 저장되며 웹 사이트의 컨텐츠 폴더에 저장할 것입니다.

 # 안녕하세요!

! [Cardigan corgi] (<https:>) 사랑스러운 Corgi!

더 많은 텍스트가 여기에 간다.</https:>

우리가 Markdown을 알고 있다고 가정하면, 우리는이 Markdown이 구문 분석 될 때“Hello World!”라는 H1 태그가 될 것이라고 추론 할 수 있습니다. 그런 다음 텍스트의 두 단락 : 첫 번째에는 코르기 이미지가 포함되어 있고 일부는 그것을 설명하기위한 텍스트를 포함하고 두 번째는“일부 더 많은 텍스트가 여기에 간다”고 말합니다.

그러나 마크 다운에서 HTML로 어떻게 변형됩니까?

그것이 ASTS가 들어오는 곳입니다!

여러 언어를 지원하기 때문에 Unist Syntax 트리 사양,보다 구체적으로는 Unified를 사용할 것입니다.

종속성을 설치하십시오

먼저, 마크 다운을 AST에 구문 분석하고 HTML로 변환하는 데 필요한 종속성을 설치해야합니다. 그렇게하려면 폴더를 패키지로 초기화했는지 확인해야합니다. 터미널에서 다음 명령을 실행하십시오.

 # 루트 폴더에 있는지 확인하십시오 ( 'Content'인 위치)
#이 폴더를 NPM 패키지로 초기화하십시오
npm init

# 종속성을 설치합니다
NPM Unified Warich-Parse warick-html을 설치합니다

Markdown이 Home.md에 저장되어 있다고 가정하면 다음 코드로 AST를 얻을 수 있습니다.

 const fs = 요구 사항 ( 'fs');
const Unified = 요구 사항 ( 'Unified');
const markdown = require ( 'warick-parse');
const html = require ( 'warch-html');

const contents = unified ()
  .use (Markdown)
  .use (html)
  .processSync (fs.ReadFilesync (`$ {process.cwd ()}/content/home.md`)))
  .TOSTRING ();

Console.log (내용);

이 코드는 Node의 내장 FS 모듈을 활용하여 파일 시스템에 액세스하고 조작 할 수 있습니다. 이것이 어떻게 작동하는지에 대한 자세한 내용은 공식 문서를 확인하십시오.

이것을 src/index.js로 저장하고 노드를 사용하여 명령 줄 에서이 스크립트를 실행하면 터미널에서 다음을 볼 수 있습니다.

 $ 노드 SRC/index.js 
<h1 id="안녕하세요-세계"> 안녕하세요 세계! </h1>
<p> <img src="<https://images.dog.ceo/breeds/corgi-cardigan/n02113186_1030.jpg>" alt="Cardigan corgi"> 사랑스러운 corgi! </p>
<p> 더 많은 텍스트가 여기에 간다. </p>

우리는 마크 다운 파일을 AST로 전환하기 위해 비고를 사용하여 Unified를 지시 한 다음, 비고 -HTML을 사용하여 마크 다운을 HTML로 바꾸거나, 더 구체적으로,이를 Vfile이라고 불리는 것으로 바꿉니다. ToString () 메소드를 사용하면 해당 브라우저에 표시 할 수있는 실제 HTML 문자열로 ast가 바뀝니다!

Open-Source 커뮤니티의 노력 덕분에 Exay는 Markdown을 우리를 위해 HTML로 바꾸는 모든 노력을합니다. (Diff 참조)

다음으로 이것이 실제로 어떻게 작동하는지 살펴 보겠습니다.

AST는 어떻게 생겼습니까?

실제 AST를 보려면 작은 플러그인을 작성하여 로그인하겠습니다.

 const fs = 요구 사항 ( 'fs');
const Unified = 요구 사항 ( 'Unified');
const markdown = require ( 'warick-parse');
const html = require ( 'warch-html');

const contents = unified ()
	.use (Markdown)
  .use (() => tree => console.log (json.stringify (tree, null, 2)))))
	.use (html)
	.processSync (fs.ReadFilesync (`$ {process.cwd ()}/content/home.md`)))
	.TOSTRING ();

스크립트 실행 출력은 이제 다음과 같습니다.

 {
  "유형": "루트",
  "어린이들": [
    {
      "유형": "제목",
      "깊이": 1,
      "어린이들": [
        {
          "유형": "텍스트",
          "가치": "안녕하세요 세계!",
          "위치": {}
        }
      ],,
      "위치": {}
    },
    {
      "유형": "단락",
      "어린이들": [
        {
          "유형": "이미지",
          "제목": NULL,
          "url": "<https:>",
          "Alt": "Cardigan Corgi",
          "위치": {}
        },
        {
          "유형": "텍스트",
          "가치": "사랑스러운 코기!",
          "위치": {}
        }
      ],,
      "위치": {}
    },
    {
      "유형": "단락",
      "어린이들": [
        {
          "유형": "텍스트",
          "가치": "더 많은 텍스트가 여기에 간다.",
          "위치": {}
        }
      ],,
      "위치": {}
    }
  ],,
  "위치": {}
}</https:>

공간을 절약하기 위해 위치 값이 잘 렸습니다. 여기에는 노드가 문서의 위치에 대한 정보가 포함되어 있습니다. 이 튜토리얼의 목적 상, 우리는이 정보를 사용하지 않을 것입니다. (Diff 참조)

이것은 보는 것이 조금 압도적이지만, 우리가 확대하면 마크 다운의 각 부분이 텍스트 노드가있는 노드 유형이되는 것을 알 수 있습니다.

예를 들어 제목은 다음과 같습니다.

 {
  "유형": "제목",
  "깊이": 1,
  "어린이들": [
    {
      "유형": "텍스트",
      "가치": "안녕하세요 세계!",
      "위치": {}
    }
  ],,
  "위치": {}
}

이것이 의미하는 바입니다.

• 이 유형은 우리가 어떤 노드를 다루고 있는지 알려줍니다.
• 각 노드 유형에는 노드를 설명하는 추가 속성이 있습니다. 제목의 깊이 속성은 우리에게 어떤 레벨이 제목인지를 알려줍니다. 1의 깊이는

  태그, 2를 의미합니다.

  등을 의미합니다.

• 어린이 배열은이 노드 내부에 무엇이 있는지 알려줍니다. 제목과 단락 모두 텍스트 만 있지만 과 같은 인라인 요소도 볼 수 있습니다.

이것이 AST의 힘입니다. 이제 우리는 Markdown 문서를 컴퓨터가 이해할 수있는 객체로 설명했습니다. 이것을 Markdown에 다시 인쇄하려면 Markdown 컴파일러는 깊이가 1 인 "헤딩"노드가 #로 시작하고 "hello"값을 가진 하위 텍스트 노드는 최종 줄이 # hello 여야한다는 것을 알게 될 것입니다.

AST 변환이 어떻게 작동하는지

AST 변환은 일반적으로 방문자 패턴을 사용하여 수행됩니다. 이것이 생산적인 방법의 INS와 아웃을 아는 것은 중요하지 않지만, 궁금한 점이 있다면 Soham Kamani의 인간을위한 JavaScript 디자인 패턴은 그것이 어떻게 작동하는지 설명하는 데 도움이되는 훌륭한 예를 가지고 있습니다. 알아야 할 중요한 점은 AST 작업에 관한 대부분의 자원이“방문 노드”에 대해 이야기 할 것이며, 이는“AST의 일부를 찾아서 우리가 할 일을 할 수있는 것”으로 번역됩니다. 이 작업 방식은 기준과 일치하는 AST 노드에 적용될 함수를 작성하는 것입니다.

작동 방식에 대한 몇 가지 중요한 메모 :

• AST는 거대 할 수 있으므로 성능의 이유로 노드를 직접 돌연변이하게합니다. 이것은 일반적으로 글로벌 상태를 돌연변이하는 것을 좋아하지 않는 일반적인 규칙으로서 일반적으로 사물에 접근하는 방식에 대응하지만이 맥락에서 의미가 있습니다.
• 방문객들은 재귀 적으로 일합니다. 즉, 노드를 처리하고 동일한 유형의 새 노드를 만들면 방문자가 명시 적으로 지시하지 않는 한 새로 생성 된 노드에서 실행됩니다.
• 우리는이 튜토리얼에서 너무 깊이 가지 않을 것이지만,이 두 가지 아이디어는 코드를 엉망으로 시작할 때 무슨 일이 일어나고 있는지 이해하는 데 도움이 될 것입니다.

AST의 HTML 출력을 어떻게 수정합니까?

그래도 Markdown의 출력을 변경하려면 어떻게해야합니까? 우리의 목표는 그림 요소로 이미지 태그를 래핑하고 다음과 같은 캡션을 제공하는 것이라고 가정 해 봅시다.

 
  <img src="<https://images.dog.ceo/breeds/corgi-cardigan/n02113186_1030.jpg>" alt="Cardigan Corgi">
  <figcaption> 사랑스러운 코기! </figcaption>
그림>

이를 달성하려면 Markdown에는 그림이나 그림 요소를 만드는 방법이 없기 때문에 Markdown AST가 아닌 HTML AST를 변환해야합니다. 다행스럽게도 Unified는 여러 개의 파서와 상호 운용 할 수 있기 때문에 많은 사용자 정의 코드를 작성하지 않고도 그렇게 할 수 있습니다.

마크 다운을 HTML AST로 변환하십시오

Markdown AST를 HTML AST로 변환하려면, 비고-불안감을 추가하고 AST를 HTML로 돌리기 위해 Rehype-Stringify로 전환하십시오.

 NPM 설치 비고-불안한 rehype-stringify

src/index.js에서 다음을 변경하여 rehype로 전환하십시오.

 const fs = 요구 사항 ( 'fs');
const Unified = 요구 사항 ( 'Unified');
const markdown = require ( 'warick-parse');
const warnice2rehype = require ( 'warting-rehype');
const html = 요구 사항 ( 'rehype-stringify');

const contents = unified ()
	.use (Markdown)
  . 사용
	.use (() => tree => console.log (json.stringify (tree, null, 2)))))
	.use (html)
	.processSync (fs.ReadFilesync ( 'corgi.md')))
	.TOSTRING ();

Console.log (내용);

HTML 변수는 warting-html에서 rehype-stringify로 변경되었습니다. 둘 다 ast를 html로 연결할 수있는 형식으로 바꿉니다.

스크립트를 실행하면 AST에서 이미지 요소가 다음과 같이 보일 수 있습니다.

 {
  "유형": "요소",
  "tagname": "img",
  "속성": {
    "SRC": "https://images.dog.ceo/breeds/corgi-cardigan/n02113186_1030.jpg",
    "Alt": "Cardigan Corgi"
  },
  "어린이들": [],
  "위치": {}
}

이것은 이미지의 HTML 표현에 대한 AST이므로 그림 요소를 사용하기 위해 변경을 시작할 수 있습니다. (Diff 참조)

Unified 용 플러그인을 작성하십시오

그림 요소로 IMG 요소를 래핑하려면 플러그인을 작성해야합니다. Unified에서는 플러그인을 첫 번째 인수로 받아들이고 두 번째 인수로 플러그인을 허용하는 사용 () 메소드와 함께 플러그인이 추가됩니다.

 .use (플러그인, 옵션)

플러그인 코드는 옵션을 수신하는 함수 (통합 전문 용어의 "첨부 버")입니다. 이 옵션은 AST를 수신하고 변환하는 새로운 기능 ( "변압기")을 작성하는 데 사용됩니다. 플러그인에 대한 자세한 내용은 통합 문서의 플러그인 개요를 확인하십시오.

그것이 반환하는 함수는 전체 AST를 인수로 받아들이고 아무 것도 반환하지 않습니다. (ASTS는 전 세계적으로 변이됩니다.) index.js와 동일한 폴더에서 img-to-figure.js라는 새 파일을 만듭니다.

 module.exports = 옵션 => tree => {
  Console.log (트리);
};

이것을 사용하려면 src/index.js에 추가해야합니다.

 const fs = 요구 사항 ( 'fs');
const Unified = 요구 사항 ( 'Unified');
const markdown = require ( 'warick-parse');
const warnice2rehype = require ( 'warting-rehype');
const html = 요구 사항 ( 'rehype-stringify');
const imgtofigure = require ( './ img-to-figure');

const contents = unified ()
  .use (Markdown)
  . 사용
  .use (imgtofigure)
  .processSync (fs.ReadFilesync ( 'corgi.md')))
  .TOSTRING ();

Console.log (내용);

스크립트를 실행하면 전체 트리가 콘솔에 로그인되는 것을 볼 수 있습니다.

 {
  유형 : '루트',
  어린이들: [
    {
      유형 : '요소',
      Tagname : 'P',
      속성: {},
      어린이 : [배열],
      위치 : [개체]
    },
    {type : 'text', value : '\\ n'},
    {
      유형 : '요소',
      Tagname : 'P',
      속성: {},
      어린이 : [배열],
      위치 : [개체]
    }
  ],,
  위치: {
    시작 : {line : 1, 열 : 1, 오프셋 : 0},
    끝 : {line : 4, 열 : 1, 오프셋 : 129}
  }
}

(Diff 참조)

플러그인에 방문자를 추가하십시오

다음으로 방문자를 추가해야합니다. 이것은 실제로 코드를 얻을 수있게 해줄 것입니다. Unified는 Unist-util-*로 접두사가있는 다수의 유틸리티 패키지를 활용하여 사용자 지정 코드를 작성하지 않고 AST와 공통된 작업을 수행 할 수 있습니다.

Unist-util-Visit을 사용하여 노드를 수정할 수 있습니다. 이것은 우리에게 세 가지 주장을하는 방문 도우미를 제공합니다.

• 우리가 함께 일하는 전체 AST
• 방문 할 노드를 식별하는 술어 기능
• 우리가 만들고 싶은 AST를 변경하는 기능

설치하려면 명령 줄에서 다음을 실행하십시오.

 NPM Unist-util-Visit을 설치하십시오

다음 코드를 추가하여 플러그인에서 방문자를 구현하겠습니다.

 const vison = require ( 'unist-util-Visit');

  module.exports = 옵션 => tree => {
    방문하다(
      나무,
      // IMG 요소가 포함 된 P 태그 만 방문
      노드 =>
        node.tagname === 'p'&& node.children.some (n => n.tagname === 'img'),
      노드 => {
        Console.log (노드);
      }
    );
};

우리가 이것을 실행할 때, 우리는 단락 노드가 하나만 기록된다는 것을 알 수 있습니다.

 {
  유형 : '요소',
  Tagname : 'P',
  속성: {},
  어린이들: [
    {
      유형 : '요소',
      tagname : 'img',
      속성 : [대상],
      어린이들: [],
      위치 : [개체]
    },
    {type : 'text', value : '사랑스러운 corgi!', 위치 : [Object]}
  ],,
  위치: {
    시작 : {line : 3, 열 : 1, 오프셋 : 16},
    끝 : {line : 3, 열 : 102, 오프셋 : 117}
  }
}

완벽한! 우리는 수정하려는 이미지가있는 단락 노드 만 받고 있습니다. 이제 우리는 AST를 변화시키기 시작할 수 있습니다!

(Diff 참조)

그림 요소에 이미지를 감싸십시오

이제 이미지 속성이 있으므로 AST를 변경할 수 있습니다. ASTS는 실제로 클 수 있기 때문에 많은 사본을 만들지 않고 스크립트를 속도를 늦출 수 있도록 제자리에 돌연변이합니다.

우리는 노드의 태그 이름을 단락 대신 그림으로 변경하는 것으로 시작합니다. 나머지 세부 사항은 현재 동일하게 유지 될 수 있습니다.

src/img-to-figure.js에서 다음을 변경하십시오.

 const vison = require ( 'unist-util-Visit');

module.exports = 옵션 => tree => {
  방문하다(
    나무,
    // IMG 요소가 포함 된 P 태그 만 방문
    노드 =>
    node.tagname === 'p'&& node.children.some (n => n.tagname === 'img'),
    노드 => {
      node.tagname = '그림';
    }
  );
};

우리가 스크립트를 다시 실행하고 출력을 보면, 우리가 가까워지고 있음을 알 수 있습니다!

 <h1 id="안녕하세요-세계"> 안녕하세요 세계! </h1>
<fig> <img src="<https://images.dog.ceo/breeds/corgi-cardigan/n02113186_1030.jpg>" alt="Cardigan corgi"> 사랑스러운 corgi! 
<p> 더 많은 텍스트가 여기에 간다. </p></fig>

(Diff 참조)

이미지 옆의 텍스트를 캡션으로 사용하십시오.

사용자 정의 구문을 쓰지 않아도 이미지 캡션으로 이미지와 함께 인라인으로 전달 된 텍스트를 사용하겠습니다.

우리는 일반적으로 이미지가 Markdown에 인라인 텍스트가 없다는 가정을 할 수 있지만, 이것이 100%의 의도하지 않은 캡션이 Markdown을 쓰는 사람들에게 나타날 수 있다는 점에 주목할 가치가 있습니다. 우리는이 튜토리얼에서 그 위험을 감수 할 것입니다. 이것을 생산에 넣을 계획이라면 트레이드 오프를 평가하고 상황에 가장 적합한 것을 선택하십시오.

텍스트를 사용하기 위해 부모 노드 내부에서 텍스트 노드를 찾을 것입니다. 우리가 하나를 찾으면, 우리는 캡션으로 그 가치를 가져오고 싶습니다. 캡션이 없으면이 노드를 전혀 변환하고 싶지 않으므로 일찍 돌아올 수 있습니다.

SRC/IMG-to-figure.js를 다음과 같이 변경하여 캡션을 가져옵니다.

 const vison = require ( 'unist-util-Visit');

module.exports = 옵션 => tree => {
  방문하다(
    나무,
    // IMG 요소가 포함 된 P 태그 만 방문
    노드 =>
    node.tagname === 'p'&& node.children.some (n => n.tagname === 'img'),
    노드 => {
      // 텍스트 노드를 찾습니다
      const textnode = node.children.find (n => n.type === 'text');
 
      // 캡션이없는 경우 노드를 변환 할 필요가 없습니다.
      if (! textNode) 리턴;
 
      const caption = textnode.value.trim ();
 
      console.log ({caption});
      node.tagname = '그림';
    }
  );
};

스크립트를 실행하면 캡션이 기록 된 것을 볼 수 있습니다.

 {캡션 : '사랑스러운 코기!' }

(Diff 참조)

그림에 Figcaption 요소를 추가하십시오

이제 캡션 텍스트가 있었으므로 그림을 표시하여 표시 할 수 있습니다. 새 노드를 생성하고 이전 텍스트 노드를 삭제하여이를 수행 할 수 있지만, 자리를 돌리기 때문에 텍스트 노드를 요소로 변경하는 것이 조금 덜 복잡합니다.

요소에는 텍스트가 없으므로 캡션 텍스트를 표시하려면 Figcaption 요소의 자식으로 새 텍스트 노드를 추가해야합니다.

SRC/IMG-to-figure.js를 다음과 같이 변경하여 마크 업에 캡션을 추가하십시오.

 const vison = require ( 'unist-util-Visit');

module.exports = 옵션 => tree => {
  방문하다(
    나무,
    // IMG 요소가 포함 된 P 태그 만 방문
    노드 =>
      node.tagname === 'p'&& node.children.some (n => n.tagname === 'img'),
    노드 => {
      // 텍스트 노드를 찾습니다
      const textnode = node.children.find (n => n.type === 'text');

      // 캡션이없는 경우 노드를 변환 할 필요가 없습니다.
      if (! textNode) 리턴;

      const caption = textnode.value.trim ();
      // 텍스트 노드를 텍스트 노드를 포함하는 Figcaption 요소로 변경
      TextNode.type = '요소';
      TextNode.tagName = 'figcaption';
      textnode.children = [
        {
          유형 : '텍스트',
          가치 : 캡션
        }
      ];

      node.tagname = '그림';
    }
  );
};

Node Src/Index.js로 스크립트를 다시 실행하면 변형 된 이미지가 그림 요소에 래빙되어 Figcaption으로 설명됩니다!

 <h1 id="안녕하세요-세계"> 안녕하세요 세계! </h1>
<fig> <img src="<https://images.dog.ceo/breeds/corgi-cardigan/n02113186_1030.jpg>" alt="cardigan corgi"> <figcaption> 사랑스러운 corgi! </figcaption> 

<p> 더 많은 텍스트가 여기에 간다. </p></fig>

(Diff 참조)

변환 된 내용을 새 파일에 저장하십시오

이제 우리는 많은 변환을 만들었으므로 조정을 실제 파일에 저장하여 공유 할 수 있습니다.

Markdown에는 전체 HTML 문서가 포함되어 있지 않기 때문에 전체 문서 구조와 제목 태그를 추가하기 위해 Rehype-Document라는 Rehype 플러그인을 추가 할 것입니다.

실행에 의해 설치 :

 NPM REHYPE-DOCUMENT 설치

다음으로 SRC/index.js를 다음과 같이 변경하십시오.

 const fs = 요구 사항 ( 'fs');
const Unified = 요구 사항 ( 'Unified');
const markdown = require ( 'warick-parse');
const warnice2rehype = require ( 'warting-rehype');
const doc = require ( 'rehype-document');
const html = 요구 사항 ( 'rehype-stringify');

const imgtofigure = require ( './ img-to-figure');

const contents = unified ()
	.use (Markdown)
	. 사용
	.use (imgtofigure)
    .use (doc, {제목 : '변환 된 문서!'})
	.use (html)
	.processSync (fs.ReadFilesync (`$ {process.cwd ()}/content/home.md`)))
	.TOSTRING ();

 const outputDir =`$ {process.cwd ()}/public`;

  if (! fs.existsSync (outputDir)) {
    fs.mkdirsync (outputdir);
  }
 
  fs.writeFilesync (`$ {outputDir}/home.html`, 내용);

스크립트를 다시 실행하면 Root에서 공개라는 새 폴더를 볼 수 있으며 내부에서는 HOME.HTML을 볼 수 있습니다. 내부에는 변형 된 문서가 저장됩니다!

  

<meta charset="utf-8">
<title> 변환 된 문서! </title>
<meta name="viewport" content="width = device-width, 초기 스케일 = 1">


	<h1 id="안녕하세요-세계"> 안녕하세요 세계! </h1>
	<fig> <img src="<https://images.dog.ceo/breeds/corgi-cardigan/n02113186_1030.jpg>" alt="cardigan corgi"> <figcaption> 사랑스러운 corgi! </figcaption> 
	<p> 더 많은 텍스트가 여기에 간다. </p>

</fig>

위 내용은 초록 구문 트리에서 노드를 수정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!