원본 코드에서 튜토리얼을 생성하는 데 사용되는 도구를 시작합니다

나는 이미 나의 게임 엔진Pixel Vision 8을 위해 6년 동안 일했다.모든 대형 소스 개발 프로젝트에서 일하는 도전 중 하나는 모든 문서와 강좌를 작성하는 것이다.나는 자동화 구축 시스템을 설계하는 데 몰두해 왔는데, 갑자기 내가 전체 과정을 간소화하는 데 도움을 줄 수 있는 도구를 만들 수 있다는 생각이 들었다.이 생각은 매우 간단합니다. 코드 파일을 분석하여 단독 절차로 분해할 수 있습니까?
나는 Google Apps Script를 사용하여 구글 문서를 자동으로 변환하여 PV8's Github wiki에 가격 인하를 생성하기 시작했다.나는 이 작업 절차에서 큰 성공을 거두었기 때문에 링크드 인 학습을 위한 이름을 만들었다.그리고 나서 나는 JS 코드를 꺼내서 Atom에 플러그인으로 넣고 실시간으로 튜토리얼을 생성했다.하지만 지난 주말에 나는packaged up the core logic and uploaded it to NPM.이 항목은 Tutorial Writer라고 명명되었으며 이제 사용하려는 NodeJS 구축 시스템과 함께 사용할 수 있습니다.

Tutorial Writer는 성숙한 도구가 아니라 POC와 같다.내가 그것을 계속 정리하고 더 많은 기능을 추가하는 동시에, 나는 그것을 구동하는 논리를 훑어볼 것이라고 생각한다.다음 Lua 스크립트를 시작하겠습니다.

-- This is a local variable
local total = 0

-- Here is a function
function Init()

     -- Here is a generic block of code
     table.insert(tileIDs, index)

end

튜토리얼 컴파일러를 사용하는 것은 매우 간단하다.NPM에서 설치하면 다음과 같습니다.> npm i tutorial-writer패키지를 참조하여 Lua 파일의 컨텐트를 전달하기만 하면 됩니다.

const tutorialWriter = require('../index');
const fs = require('fs');

let filePath = "./examples/code.lua"

let text = fs.readFileSync(filePath, 'utf8');

let markdown = tutorialWriter.toMarkdown("code.lua", text, tutorialWriter.luaTemplate);

console.log("# Tutorial Writer Markdown\n", markdown);

Tutorial Writer는 다음과 같이 스크립트를 markdown의 단계별 자습서로 변환합니다.

첫걸음

프로젝트 폴더에 code.lua라는 새 파일을 만듭니다.

두 번째 단계

local에 total라는 새 script 변수를 만듭니다.

01 local total = 0

이것은 국부 변수이다

세 번째 단계

function라는 새 Init()를 만듭니다.

02 function Init()
03 
04 end

여기 함수가 있어요.

4단계

다음 코드를 Init() 함수에 추가합니다.

03      table.insert(tileIDs, index)

다음은 통용 코드이다

최종 코드

완료되면 code.lua 파일에는 다음 코드가 포함되어야 합니다.

01 local total = 0
02 function Init()
03      table.insert(tileIDs, index)
04 end

멋있죠?이제 교과서 작성기의 실제 작업 원리를 알아보자.만약 당신이 교과서 저자의 모든 잠재력을 보고 싶다면 반드시 나의 Pixel Vision 8 HashNode account 를 보십시오. 나는 the API examples 에서 만든 교과서 50여 편을 발표하고 있습니다.

위의 Lua 코드 예제를 보면 해당 코드의 형식이 고유하다는 것을 알 수 있습니다.각 단락의 코드는 모두 자신의 한 줄이 있는데, 위에는 주석이 하나 있다.원시적인 코드 예시를 보고 한 걸음 한 걸음 봅시다.
우리는 여기에 세 개의 코드가 있다. 하나는 변수, 하나는 함수, 그리고 몇몇 촉발 사건이 발생하는 통용 코드이다.파서를 간단하게 유지하기 위해 나는 몇 가지 일반적인 코드 블록만 찾았다.

변수

기능

리뷰

조건

회로

범용 코드

나는 현재 튜토리얼 컴파일러를 더욱 모듈화하고 있다.이상적인 상황에서 C#와 같은 것을 해석하기 위해 서로 다른 규칙을 지원해야 하며, 나의 게임 엔진도 그것을 지원해야 한다.이제 Lua가 더 쉽게 토론할 수 있으니, 교과서 작성자가 코드를 어떻게 분해하는지 이야기해 봅시다.
첫 번째 단계는 파일의 빈 줄에 따라 모든 코드를 분리하는 것입니다.모든 코드 그룹은 하나의 code block 대상으로 변환되어 있으며, 나는 잠시 후에 처리할 수 있다.다음은 튜토리얼 작성자가 보는 4개의 코드 블록입니다.

제1구

-- This is a local variable
local total = 0

제2구역

-- Here is a function
function Init()

제3구

          -- Here is a generic block of code
          table.insert(tileIDs, index)

제4구

end

일단 우리가 모든 코드 블록이 생기면, 해석기는 그것들을 순환해서 마지막 강좌의 한 단계로 전환할 수 있다.마크 다운으로 돌아가는 코드 블록을 요구할 때, 줄마다 훑어보고 포함된 코드 형식을 확인합니다.다음은 블록 1을 해석하는 방법입니다.
이 코드 블록에는

행 1

-- This is a local variable

두 번째 행

local total = 0나는 줄마다 내용을 확인하기 위해 정규 표현식 모드를 가지고 있다.다음은 제가 검색한 몇 가지 모드입니다.

변수: /(local)+\s+(\w+)/

기능: /(function|\s)+\s+(\w+) *\([^\)]*\)/

조건: /if/

주기: /for/

기타: /else/

BlockEnd:/end/

한 줄이 주석인지 아닌지를 판단하는 것은 매우 쉽다. 왜냐하면 나는 앞의 두 문자만 테스트해서 그것들이 --로 시작하는지 볼 수 있기 때문이다.만약 코드 블록에 주석이 있다면, 나는 이 줄을 끌어내서 나중에 사용할 수 있도록 저장하기만 하면 된다.그리고regex 테스트를 바탕으로 하나의 유형을 전체 코드 블록에 분배한 다음 다음 다음 코드 블록을 계속합니다.
코드 블록에 주석이 있으면 주석은 단계 하단의 설명이 됩니다.코드 위에 빈 줄이 없으면 임의의 주석이 있을 수 있다.해석기가 코드 블록에 추가되지 않은 주석을 만났을 때, 줄마다 > 을 붙여서markdown의 Blockquote로 변환합니다.
코드 블록이 하나의 유형variable으로 분배된 이상 절차 템플릿을 찾아서 가격 인하로 전환해야 한다.모든 코드 형식의 템플릿을 포함하는 또 다른 대상이 있습니다.다음은 제가 Lua를 위해 사용한 몇 가지입니다.

코드: Add the following code to the {0}:

조건: Add the following condition to the {0}:

주기: Create the following Loop:

기능: Create a new {0} called {1}():

변수: Create a new {0} variable called {1}{2}:

이제 step 템플릿이 생겼습니다. 변수의 줄을 분석해서 범위를 확인하려고 합니다.Lua에서, 나는 단지 검색local만 할 수 있다. 왜냐하면 전체 국면을 확정하는 것이 더욱 도전적이기 때문이다.다음은 최종 가격 인하입니다. 첫 번째 단계는 항상 코드 파일 자체를 만드는 데 사용되기 때문입니다.

두 번째 단계

local에 total라는 새 script 변수를 만듭니다.

01 local total = 0

이것은 국부 변수이다

너는 내가 코드에 줄 번호를 할당했다는 것을 알아차릴 것이다.내가 80년대에 읽은 몇몇 오래된 프로그래밍 서적들은 튜토리얼 작가 (Tutorial Writer) 에서 이 기능을 크게 계발했다.이 책들 중에서, 너는 몇 페이지의 코드를 줄 번호로 인쇄할 수 있을 것이다. 그러면 너는 너의 위치를 잃지 않을 것이다.잠시 후, 내가 모든 절차를 모든 코드를 표시하는 마지막 단계로 합쳤을 때, 이 숫자는 중요한 역할을 했다.
모든 코드 블록은 어느 줄에 속하는지 확인하는 것을 책임진다. 나는 숫자가 정확하고 정확한 위치에서 점차적으로 증가해야 한다. 특히 다른 코드 블록에 끼워 넣을 때.
지금 우리는 Block2를 볼 수 있다. 그것은 약간 다르다. 왜냐하면 그것은 하나의 함수이기 때문에 시작과 끝이 있기 때문이다.Lua에서 문장을 닫는 데는 블록 4에서 볼 수 있는 end가 필요하지만 해석기는 아직 의식하지 못했다.파서는 엔딩이 필요한 코드 블록을 만났을 때 다음과 같이 코드 블록에 두 줄, 한 줄 빈 줄, close 문을 자동으로 추가합니다.

세 번째 단계

function라는 새 Init()를 만듭니다.

02 function Init()
03 
04 end

여기 함수가 있어요.
파서는 현재 함수 내부에 있음을 나타내는 플래그도 설정하여 다음 코드 블록을 만나면 다음과 같이 코드를 추가할 함수의 이름을 참조합니다.

4단계

다음 코드를 Init() 함수에 추가합니다.

03      table.insert(tileIDs, index)

다음은 통용 코드이다
이전 코드 블록이 3로 끝나도 이 줄은 4로 변경됩니다.해석기가 함수 내부에 있다는 것을 알고 코드를 정확하게 추가할 수 있도록 한 줄을 뒤로 물러서기 때문이다.
해석기가 가장 처리할 필요가 없는 것은 남은 end 문장이다.이것은 이미 기능 코드 블록에 설명되어 있기 때문에 무시할 수 있다.
이제 파서가 완료되었으므로 다음과 같이 최종 코드를 생성해야 합니다.

최종 코드

완료되면 code.lua 파일에는 다음 코드가 포함되어야 합니다.

01 local total = 0
02 function Init()
03      table.insert(tileIDs, index)
04 end

이것은 코드를 한 걸음 한 걸음 교정하는 완전 자동화 방법이다.비록 내가 처음에 이 글을 쓴 것은 나의 링크드 인 학습 과정에 스크립트를 만드는 것을 돕기 위해서였지만, 대부분의 개발자들이 스크립트로 만들어진 완전한 교과서를 완성하기에 충분한 도구가 되었다.더 좋은 것은 포맷된 부산물로 해상도가 읽을 수 있는 방식으로 깨끗하고 문서가 완전한 코드를 작성하도록 하는 것이다.
비록 이것은 여전히 간단한 POC이지만, 나는 그것을 바탕으로 계속 발전해서 내가 얼마나 멀리 갈 수 있는지 볼 계획이다.
만약 당신이 이 프로젝트를 좋아한다면, 메시지를 남겨 주세요.❤️ 및 ⭐️ on Github.나는 기술 창작을 막 시작한 개발자가 전체 과정을 간단하게 자동화함으로써 다른 사람과 그들의 일을 공유하는 것을 기꺼이 돕는다!