codecrumbs 다운로드 - codecrumbs 소스 코드 다운로드

codecrumbs

자바 소스 코드

1.0.0

다운로드

내용 · 데모 · 시작하기 · 기능 · 사례 연구 · 지원

크거나 알려지지 않은 코드베이스에서 길을 잃은 적이 있습니까? 이 도구는 이 문제를 해결하는 데 도움이 될 것입니다. 또한 개발 속도를 높이고 애플리케이션 아키텍처에 대한 더 많은 지식을 제공합니다.

이 프로젝트가 마음에 드신다면 Twitter @bliashenko에서 저를 팔로우하여 제가 만들고 있는 것들에 대해 들어보세요.

코드크럼 v2

독립 실행형 애플리케이션으로 이 프로젝트의 새 버전을 확인하세요. 몇 번의 클릭만으로 보다 효율적인 방법으로 코드베이스 탐색을 시작하고, 대화형 시각적 가이드를 만들고, 이를 자신의 블로그에서 다른 사람들과 공유할 수 있습니다! 여기에서 빠른 가이드를 참조하세요.

데모

여기에서 실행되는 독립형 버전 에 대해 준비된 예를 확인하세요.

코드크럼 v1

어떻게 작동하나요? 코드베이스에 대해 codecrumbs 명령을 실행하면 소스 코드를 분석하고 시각적 표현을 구축합니다. codecrumb-comment를 작성하면 코드베이스 상태가 브라우저의 시각적 클라이언트에 즉시 반영됩니다.
자세한 내용은 React-Finland에서 제가 한 강연을 확인해 보세요.

시작하기

설치 및 실행

전제 조건: NodeJS 버전을 8.11.1 이상으로 업데이트/설치

전역적으로 codecrumbs 설치( yarn global add codecrumbs )
codecrumbs -d project-src-dir -e project-src-dir/index.js 실행합니다. 프로젝트에 맞게 매개변수를 변경하세요. -d 소스 코드가 있는 디렉터리 이고, -e 진입점 파일 입니다.
브라우저에서 http://localhost:2018로 이동하여 확인해 보세요.

구성

CLI 매개변수를 사용하여 codecrumbs를 실행하거나 정적 구성 파일 codecrumbs.config.js 지정합니다(여기 예시 참조).

CLI	구성 파일	설명	예
`d`	`projectDir`	프로젝트 소스 코드 디렉터리의 상대 경로	`-d src`
`e`	`entryPoint`	프로젝트 소스 진입점 파일의 상대 경로( `dir` 내부에 있어야 함)	`-e src/app.js`
`x`	`excludeDir`	제외할 디렉터리의 상대 경로(또는 `,` 로 구분된 경로)	`-x src/doc,src/thirdparty`
`p`	`clientPort`	Codecrumbs 클라이언트용 포트(선택 사항, 기본값은 2018 )	`-p 2019`
`n`	`projectNameAlias`	프로젝트 이름 별칭(선택 사항, 기본값은 `-d` 값과 동일)	`-n my-hello-world`
`C`	-	codecrumbs.config.js 경로(선택 사항, 기본적으로 PWD에서 파일을 찾으려고 시도함)	`-C config/codecrumbs.config.js`
`D`	`debugModeEnabled`	로그에 대한 디버그 모드 활성화(선택 사항, 기본값은 `false` )	`-D`

특징

탐색경로 및 트레일

UI 설명:

구성표에 코드크럼 트리를 포함하려면 "Codecrumbs" 스위치를 활성화하십시오(드롭다운에 추가 구성이 포함됨).
표시할 "현재" 코드크럼 트레일을 선택합니다(트레일 또는 기타 모든 "간단한" 코드크럼일 수 있음).
두 단계 사이의 연결을 선택합니다(두 코드크럼에 대한 코드는 "Crumbs" 탭 아래의 "사이드바"에 열립니다).
다이어그램의 동작을 구성하기 위해 드롭다운에서 다른 옵션을 설정합니다(코드 블록, 세부 정보 등 표시).

거기에 가는 방법?

//cc:[parameters;] 주석을 적어 코드에 이동 경로를 남겨주세요.

cc ("CodeCrumb"를 나타냄)는 파서가 사용하는 접두사입니다. 아래 표에서 매개변수의 예를 확인하세요.

예	설명	사용 사례
`//cc:remember place`	간단한 탐색경로, `remember place` .	중요한 장소를 표시하여 어디에 있었는지 잊지 마세요.
`//cc:here is bug;well, seems like a bug in logic`	간단한 이동 경로는 `well, seems like a bug in logic` . 이동 경로에 대한 세부 정보는 `;` 로 구분됩니다.	추가 정보를 추가하면 팝업으로 렌더링됩니다.
`//cc:signin#3;enable route`	trail of breadcrumbs, `signin` 은 trail ID , `#3` 은 단계의 주문 번호 , `enable route` 는 단계를 설명하는 제목입니다.	일부 데이터 흐름(예: 사용자 로그인, 양식 제출 등)을 설명하는 데 사용되는 일련의 코드크럼입니다.
`//cc:signin#1;firebase sign in;+2;do call to firebase with credentials`	이동 경로의 흔적, `+2` 강조 표시할 줄 수이며 `;` 로 구분됩니다.	줄 수를 사용하여 이동 경로와 관련된 코드 강조 표시

참고: 현재 버전은 한 줄 주석만 지원합니다.

힌트: 단계 번호 없이 트레일 ID(예: //cc:groupname#;test )를 사용하여 탐색경로를 그룹화할 수 있습니다. 올바른 순서를 알고 나면 나중에 언제든지 단계 번호를 추가할 수 있습니다.

다중 코드베이스 통합

여러 코드베이스(하위 모듈) 간의 연결을 연구하는 데 관심이 있을 수 있으며, codecrumbs는 이를 지원합니다. 간단히 codecrumbs를 여러 번(각 코드베이스에 대해 한 번) 시작하면 브라우저 탭 내에서 하나의 그림으로 모두 동기화됩니다 . 다이어그램 UI를 제어하려면 클릭하여 선택하세요.

예를 들어 클라이언트-서버 애플리케이션의 경우 서버 코드의 소스 디렉터리로 이동하여 codecrumbs -e your-server-src/index.py -d your-server-src 실행합니다. 클라이언트 codecrumbs -e src-client/index.js -d src-client .