berryjam 다운로드 berryjam 소스 코드 다운로드

berryjam

타사 구성 요소

0.1.0-alpha.64

다운로드

VUE 3 & NUXT 용 UI 구성 요소 분석기

구성 요소 가시성 및 실행 가능한 통찰력에 대해 vue.js 코드베이스를 스캔하십시오.

문제 - Discord에 가입 - 라이센스 -Berryjam Cloud

사용 가능 : vue.js (3.x), nuxt (3.x)

왜 베리 잼

Berryjam은 구성 요소 사용, 소품 및 관계를 식별하는 간단한 방법을 제공합니다. 스캔의 출력에 따라 프로젝트 구성 요소에서 고유 한 대시 보드를 만들고 분석 팀 전체의 통신을 개선 할 수 있습니다.

특징

1. 구성 요소에 대한 프로젝트를 스캔하십시오	2. 구성 요소와 관계를 분석하십시오
3. 저자 및 DateTime의 GIT 로그를 스캔하십시오	4. 각 구성 요소의 소품을 자동으로 감지합니다

? 제한

Berryjam은 VUE 2 이하 버전과 호환되지 않습니다.
Berryjam은 16.0 에서 18.17.1 (LTS) 노드 버전과 함께 작동하도록 완전히 테스트되었습니다. 18.17.1 (LTS) 이상의 버전도 작동하지만 완전히 테스트되지는 않았습니다.

시작하기

Berryjam을 설치하십시오

Berryjam, 즉 NPM, PNPM 및 원사를 설치할 수있는 몇 가지 방법이 있습니다. NPM을 통해 설치하는 경우이 라이브러리를 설치하는 단일 CMD가 있습니다.

  npm install berryjam

다른 옵션

PNPM

  pnpm add berryjam

방사

  yarn add berryjam

용법

프로젝트 스캔을 시작하려면 먼저 VueScanner 클래스를 가져 와서 인스턴스를 만들어야합니다.

 import { homedir } from 'os' ;
import VueScanner from "berryjam"
import type { VueScannerOption , ComponentProfile } from "berryjam"
...
const pathToScan = '../your-vue-project-path' ;
const option : VueScannerOption = {
  // this folder will be used to store the exact versions of babel & vue compiler
  appDir : ` ${ homedir ( ) } /.vueScanner` ,
  // ... any other options
}
// Create a new VueScanner instance with the required parameters
const vueScanner = new VueScanner ( pathToScan , option ) ;
...
// To start scanning without async/await
vueScanner . scan ( ) . then ( result => {
  // the result will be an array of ComponentProfile
  // log to see the result
  console . log ( result ) ;
} )

// or, You can use async/await
async function whatEverFunction ( ) {
  const result = await vueScanner . scan ( ) ;
}

참고 : NUXT 프로젝트의 경우 스캔하기 전에 .nuxt 폴더가 있는지 확인하십시오.

VueScanner 함수는 다음과 같이 두 개의 매개 변수를 취합니다.

첫 번째 매개 변수는 스캔 할 프로젝트의 경로입니다.
두 번째는 VueScannerOption 인터페이스를 사용하는 옵션 객체입니다.

다음은 VueScannerOption 인터페이스 내에서 사용 가능한 각 옵션에 대한 자세한 설명입니다.

vuescanneroption 인터페이스

재산	유형	설명
`appDir`	`string`	스캔 할 프로젝트 디렉토리의 경로.
`output`	`OutputFormat` (선택 사항)	스캔 한 결과의 원하는 출력 형식. (기본적으로 JSON)
`ignore`	`string[]` (선택 사항)	스캔에서 제외 할 파일 이름 또는 디렉토리 이름 배열.
`verbose`	`boolean` (선택 사항)	보다 자세한 스캔 정보를 위해 Verbose 모드를 활성화하십시오.
`debug`	`boolean` (선택 사항)	디버깅 정보를 제공하여 디버그 모드에서 스캐너를 작동시킵니다.

OutputFormat 유형

OutputFormat 유형은 사용 가능한 출력 형식을 나타냅니다.

유형	설명
`"json"`	스캔 한 결과를 JSON 형식으로 출력하고 'AppDir'내에서 'Component-Profiles.json'으로 저장했습니다.
`"stdout"`	스캔 한 결과를 콘솔 (STDOUT)에 직접 표시하십시오.

이러한 옵션 및 유형은 VueScanner 기능을 사용하여 vue.js 프로젝트를 분석 할 때 유연성과 사용자 정의를 제공합니다.

VueScanner 클래스에 대한 자세한 내용은 아래를 확인하십시오.

산출

scan 방법을 호출하면 VUE 구성 요소를 스캔하고 ComponentProfile[] . 다음은 어떻게 보이는지에 대한 예입니다. 데모 목적으로 Koel이라는 오픈 소스 프로젝트를 스캔했습니다.

샘플 결과

[
  {
    "name" : " PlaybackControls " ,
    "type" : " internal " ,
    "total" : 1 ,
    "source" : {
      "path" : " /resources/assets/js/components/layout/app-footer/FooterPlaybackControls.vue " ,
      "property" : {
        "dataLastModified" : " Sun Feb 04 2018 " ,
        "lastModified" : " Sun Feb 04 2018 " ,
        "created" : " 2018-02-02T21:12:19.000Z " ,
        "createdBy" : " Phan An " ,
        "updatedBy" : " Phan An "
      }
    },
    "usageLocations" : [
      {
        "name" : " PlaybackControls " ,
        "source" : " /resources/assets/js/components/layout/app-footer/FooterPlaybackControls.vue " ,
        "destination" : " /resources/assets/js/components/layout/app-footer/index.vue " ,
        "rows" : [
          9
        ],
        "fileInfo" : {
          "path" : " /resources/assets/js/components/layout/app-footer/FooterPlaybackControls.vue " ,
          "property" : {
            "dataLastModified" : " Sun Feb 04 2018 " ,
            "lastModified" : " Sun Feb 04 2018 " ,
            "created" : " 2018-02-02T21:12:19.000Z " ,
            "createdBy" : " Phan An " ,
            "updatedBy" : " Phan An "
          }
        }
      }
    ],
    "children" : {
      "total" : 4 ,
      "tags" : [
        " LikeButton " ,
        " icon " ,
        " PlayButton " ,
        " RepeatModeSwitch "
      ],
      "source" : " /resources/assets/js/components/layout/app-footer/FooterPlaybackControls.vue "
    }
  },
  {
    "name" : " PlayButton " ,
    "type" : " internal " ,
    "total" : 1 ,
    "source" : {
      "path" : " /resources/assets/js/components/ui/FooterPlayButton.vue " ,
      "property" : {
        "dataLastModified" : " Sun Feb 04 2018 " ,
        "lastModified" : " Sun Feb 04 2018 " ,
        "created" : " 2018-02-02T21:12:19.000Z " ,
        "createdBy" : " Phan An " ,
        "updatedBy" : " Phan An "
      }
    },
    "usageLocations" : [
      {
        "name" : " PlayButton " ,
        "source" : " /resources/assets/js/components/ui/FooterPlayButton.vue " ,
        "destination" : " /resources/assets/js/components/layout/app-footer/FooterPlaybackControls.vue " ,
        "rows" : [
          11
        ],
        "fileInfo" : {
          "path" : " /resources/assets/js/components/ui/FooterPlayButton.vue " ,
          "property" : {
            "dataLastModified" : " Sun Feb 04 2018 " ,
            "lastModified" : " Sun Feb 04 2018 " ,
            "created" : " 2018-02-02T21:12:19.000Z " ,
            "createdBy" : " Phan An " ,
            "updatedBy" : " Phan An "
          }
        }
      }
    ],
    "children" : {
      "total" : 1 ,
      "tags" : [
        " icon "
      ],
      "source" : " /resources/assets/js/components/ui/FooterPlayButton.vue "
    }
  },
]

? 개발

라이브러리는 개발을 위해 Nodejs , TypeScript 및 Jest 사용합니다. 이것은 VUE 구성 요소를 감지하기위한 도구이므로 내장 규칙 폴더의 VUE 구성 요소에 대한 규칙을 찾을 수 있습니다.

작동 방식

Berryjam에는 2 개의 수업이 포함됩니다.

VueScanner 구성 요소 프로파일을위한 프로젝트를 스캔하는 데 사용합니다. Package.json 파일에서 소스, 파일 경로, 구성 요소 이름과 같은 관련 상대 값을 추출하여 각 컴포넌트 프로파일에 매핑 될 원시 구성 요소 데이터를 변환하거나 정상화합니다.
GitService 프로젝트에 .git 폴더가있는 경우 author 및 datetime과 같은 GIT 관련 정보를 찾아 각 구성 요소 프로파일에 매핑됩니다.

Vuescanner 개요

VueScanner 클래스 내에서 scan() 메소드를 호출하여 스캔을 시작할 수 있습니다. 이 방법은 5 가지 주요 단계를 포함합니다. 다음과 같이 있습니다.

vuescanner 클래스의 5 가지 주요 단계

단계	설명
1. `Group by Related Package.Json`	여러 package.json 파일과 지원되는 파일 ( `.vue` , `.js` , `.jsx` , `.ts` , `.tsx` 및 `.nuxt` 폴더 (있는 경우)의 모든 파일)이 있으므로 시스템은 그룹을 그룹화하여 원산지 소스를 결정합니다.
2. `Select Analyzer Lib`	프로젝트의 VUE 버전과 일치하는 올바른 라이브러리를 선택하려면
3. `Prepare Alias Paths`	'가져 오기'문서에서 교체하기 위해 사용할 ts, js 및 vite config 파일의 모든 별칭을 수집하려면
4. `Analyze Component Files`	각 파일 확장자에 대해 시스템은 소품을 포함하여 구성 요소 정보를 수집합니다.
5. `Optimize Analyzed Results`	구성 요소 정보를 기반으로, 중복을 제거하고 구성 요소 프로파일을보다 구조화 된 방식으로 서식함으로써 개선이 이루어집니다.

Gitservice 개요

다음은 GitService 클래스의 주요 방법입니다.

방법	설명
`gitScanner`	`gitMapping` 에서 사용할 git log shell 명령을 스캔하도록 시작하십시오.
`gitMapping`	`gitScanner` 의 결과를 사용하여 구성 요소 이름과 git 로그 파일 이름을 비교합니다. 두 경기 모두 GIT 정보가 해당 구성 요소 프로파일로 업데이트됩니다.

의존성

타사 플러그인은 Berryjam의 package.json에서 자동으로로드됩니다

코드 파서
- 바벨
- vue
노드 모듈
- 길
- FS
기타
- 글로벌
- Lodash
- tsconfig-paths

자세한 내용은 문서 폴더를 참조하십시오.

? 기여

우리는 모든 유형의 기여에 감사하고 감사합니다. 버그를보고하거나 수정, 새로운 기능 제안, 문서 개선 또는 단어를 전파하는 데 도움이 되든 Berryjam 커뮤니티의 일원이되기를 바랍니다. 기고 가이드 및 행동 강령을 참조하십시오.

즉시 기여를 시작하려면 GitHub 문제 탭으로 이동하여 흥미로운 문제를 살펴보십시오. documentation 및 good first issue 에 표시된 문제를 해결함으로써 시작할 수 있습니다.

Berryjam을 사용하는 동안 오류 나 문제가 발생하면 Berryjam을 더 잘하는 방법에 대한 아이디어가 있거나 문서를 살펴보고 개선 될 수 있다고 생각하고있을 것입니다 ... 주저하지 말고 문제를 제출하십시오.

node.js.에 익숙하지 않은 vue.js 개발자 인 경우 vue 구성 요소 작성 방법에 대한 문제 라벨이 붙은 code example 제출할 수 있습니다. 자세한 내용은 내장 규칙을 확인하십시오.

? 도움이 필요하십니까?

우리는 당신을 도와 드리겠습니다. 궁금한 점이 있거나 오류가 발생하거나 문제에 직면하면 Berryjam Discord에서 도움을 요청하십시오. Berryjam과 관련된 것은 테이블 위에 있습니다!

? 특허

Berryjam은 MIT 라이센스에 따라 배포됩니다. 자세한 내용은 License.md 파일을 참조하십시오.

승인

바벨
글로벌
IMG 방패
Lodash
node.js
tsconfig-paths
vue.js

확장하다

추가 정보

버전 0.1.0-alpha.64
유형 타사 구성 요소
업데이트 시간 2025-07-16
크기 1.37MB
출처 Github

berryjam

VUE 3 & NUXT 용 UI 구성 요소 분석기

목차

왜 베리 잼

특징

? 제한

시작하기

Berryjam을 설치하십시오

다른 옵션

용법

vuescanneroption 인터페이스

OutputFormat 유형

산출

? 개발

작동 방식

Vuescanner 개요

Gitservice 개요

의존성

? 기여

? 도움이 필요하십니까?

? 특허

승인

v folder

ng vcl

xant

BldHelper(볼랜드 개발자 도우미)

vue component creator plugin

empathy

chat.petals.dev

GPT Prompt Templates

GPTyped

v folder

ng vcl

xant

Google Dorks

shepherd

mongo express