berryjamのダウンロードberryjamソースコードのダウンロード

berryjam

サードパーティ製コンポーネント

0.1.0-alpha.64

ダウンロード

VUE 3およびNUXTのUIコンポーネントアナライザー

コンポーネントの可視性と実用的な洞察のために、vue.jsコードベースをスキャンします。

問題 - 私たちの不一致に参加 - ライセンス-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、YARNをインストールする方法はいくつかあります。 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関数は、次のように2つのパラメーターを取ります。

最初のパラメーターは、スキャンするプロジェクトのパスです。
2番目は、 VueScannerOptionインターフェイスを利用するオプションオブジェクトです。

VueScannerOptionインターフェイス内の各利用可能なオプションの詳細な説明は次のとおりです。

Vuescanneroptionインターフェイス

財産	タイプ	説明
`appDir`	`string`	スキャンするプロジェクトディレクトリのパス。
`output`	`OutputFormat` （オプション）	スキャンされた結果の目的の出力形式。（デフォルトでJSON）
`ignore`	`string[]` （オプション）	スキャンから除外するファイル名またはディレクトリ名の配列。
`verbose`	`boolean` （オプション）	より詳細なスキャン情報のために、冗長モードを有効にします。
`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コンポーネントプロファイルのプロジェクトをスキャンするために使用します。 Source、File Path、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構成ファイルからすべてのエイリアスを収集するには
4. `Analyze Component Files`	ファイル拡張機能ごとに、システムはプロップを含むコンポーネント情報を収集します
5. `Optimize Analyzed Results`	コンポーネント情報に基づいて、重複を削除し、より構造化された方法でコンポーネントプロファイルをフォーマットすることにより、改善が行われます

Gitserviceの概要

以下は、 GitServiceクラスの主な方法です。

方法	説明
`gitScanner`	`gitMapping`で使用されるスキャンにGitログシェルコマンドを開始します。
`gitMapping`	`gitScanner`の結果を使用して、コンポーネント名とGitログファイル名を比較します。両方とも一致する場合、Git情報はそれぞれのコンポーネントプロファイルに更新されます。

依存関係

サードパーティのプラグインは、BerryjamのPackage.jsonから自動的にロードされます

コードパーサー
- バベル
- vue
ノードモジュール
- パス
- fs
その他
- グローブ
- ロダッシュ
- tsconfig-paths

詳細については、ドキュメントフォルダーを参照してください。

？貢献

あらゆる種類の貢献に感謝し、感謝しています。バグの報告や修正、新機能の提案、ドキュメントの改善、言葉の広がりを支援しているかどうかにかかわらず、Berryjamコミュニティの一員としてあなたを迎えたいと思います。寄付ガイドと行動規範を参照してください。

すぐに貢献を開始したい場合は、[GitHub Issues]タブに移動し、興味深い問題を検討し始めてください。 documentationとgood first issueに基づいてラベル付けされた問題に取り組むことから始めることができます。

Berryjamの使用中にエラーや問題に遭遇した場合、Berryjamをより良くする方法についてのアイデアがありますか、それともドキュメントを調べて、改善できると考えています...問題を提出することを躊躇しないでください。

node.jsに慣れていないVue.js開発者の場合、Vueコンポーネントの作成方法に関する問題のラベルのあるcode exampleを提出できます。詳細については、組み込みのルルをご覧ください。

？助けが必要ですか？

私たちはあなたを助けて喜んでいます。ご質問がある場合、エラーに遭遇したり、問題に直面したりした場合は、Berryjam Discordでお気軽にお問い合わせください。 Berryjamに関連するものはすべてテーブルにあります！

？ライセンス

BerryjamはMITライセンスの下で配布されます。詳細については、ライセンスを参照してください。MDファイルを参照してください。

了承

バベル
グローブ
IMGシールド
ロダッシュ
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