berryjam
0.1.0-alpha.64
Probleme - Treten Sie unserer Zwietracht bei - Lizenz - Berryjam Cloud
Verfügbar für: Vue.js (3.x), Nuxt (3.x)
Berryjam bietet eine einfache Möglichkeit, Ihre Komponentenverwendung, Requisiten und ihre Beziehungen zu identifizieren. Basierend auf der Ausgabe Ihres Scans können Sie Ihr eigenes Dashboard erstellen und die Analysen in Ihren Projektkomponenten ausführen, um die Kommunikation in Ihrem Entwicklungsteam zu verbessern.
1. Scannen Sie Ihr Projekt nach Komponenten  | 2. Analysieren Sie Komponenten und ihre Beziehungen  |
3. Scannen Sie Git -Protokoll für Autor und DateTime  | 4. Erkennen Sie automatisch Requisiten für jede Komponente  |
Berryjam ist nicht mit Vue 2 oder niedrigeren Versionen kompatibel.
Berryjam wurde vollständig getestet, um mit der Knotenversion von 16.0 bis 18.17.1 (LTS) zu arbeiten. Versionen über 18.17.1 (LTS) sollten ebenfalls funktionieren, wurden jedoch nicht vollständig getestet.
Es gibt einige Möglichkeiten, wie Sie Berryjam installieren können, nämlich NPM, PNPM und Garn. Wenn Sie über NPM installiert sind, finden Sie hier ein einzelnes CMD, um diese Bibliothek zu installieren
npm install berryjam pnpm add berryjam yarn add berryjam Um Ihr Projekt zu scannen, müssen Sie zunächst VueScanner -Klasse importieren und seine Instanz erstellen.
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 ( ) ;
} Hinweis: Für ein Nuxt -Projekt stellen Sie bitte sicher, dass Sie vor dem Scannen einen .nuxt -Ordner haben.
Die VueScanner -Funktion nimmt zwei Parameter wie folgt auf:
VueScannerOption -Schnittstelle verwendet. Hier finden Sie die detaillierte Beschreibung jeder verfügbaren Option in der VueScannerOption -Schnittstelle:
| Eigentum | Typ | Beschreibung |
|---|---|---|
appDir | string | Der Weg des Projektverzeichnisses zu scannt. |
output | OutputFormat (optional) | Das gewünschte Ausgangsformat des gescannten Ergebnisses. (JSON standardmäßig) |
ignore | string[] (optional) | Eine Reihe von Dateinamen oder Verzeichnisnamen, die vom Scannen ausgeschlossen werden sollen. |
verbose | boolean (optional) | Aktivieren Sie den ausführlicheren Modus für detailliertere Scaninformationen. |
debug | boolean (optional) | Betreiben Sie den Scanner im Debug -Modus und liefern Debugging -Informationen. |
Der OutputFormat -Typ repräsentiert verfügbare Ausgangsformate.
| Typ | Beschreibung |
|---|---|
"json" | Ausgeben das gescannte Ergebnis im JSON-Format und speichert als "component-profiles.json" innerhalb des "Appdir". |
"stdout" | Zeigen Sie das gescannte Ergebnis direkt in der Konsole (STDOut) an. |
Diese Optionen und Typen bieten Flexibilität und Anpassung, wenn die VueScanner -Funktion zur Analyse von VUE.JS -Projekten verwendet wird.
Weitere Informationen zur VueScanner -Klasse finden Sie weiter unten.
Durch Aufrufen der scan -Methode scannen Sie nach VUE -Komponenten und geben ComponentProfile[] zurück. Hier ist ein Beispiel dafür, wie es aussehen kann. Zu Demonstrationszwecken haben wir ein Open-Source-Projekt namens Koel gescannt.
[
{
"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 "
}
},
] Die Bibliothek verwendet Nodejs , TypeScript und Jest für die Entwicklung. Da dies ein Werkzeug zum Erkennen von Vue-Komponenten ist, finden Sie möglicherweise die Regeln, wie VUE-Komponenten im Ordner integriert werden.
Berryjam enthält 2 Klassen, nämlich:
VueScanner - Zum Scannen eines Projekts nach Komponentenprofilen. Es wird relevante relative Werte wie Quelle, Dateipfad, Komponentenname aus Paket.json -Dateien und deren jeweiligen unterstützten Dateien extrahiert, um Rohkomponentendaten zu transformieren oder zu normalisieren, die auf jedes Komponentenprofil zugeordnet werden.
GitService - Wenn das Projekt einen .Git -Ordner hat, wird nach GIT -verwandten Informationen wie Autor und DateTime und zu jedem Komponentenprofil gesucht.
Innerhalb der VueScanner -Klasse können Sie scan() -Methode aufrufen, um mit dem Scannen zu beginnen. Die Methode umfasst 5 Hauptschritte. Es gibt wie folgt:
| Schritt | Beschreibung |
|---|---|
1. Group by Related Package.Json | Da es mehrere paket.json -Dateien und unterstützte Dateien gibt ( .vue , .js , .jsx , .ts , .tsx und alle Dateien aus dem .nuxt -Ordner (falls vorhanden)), wird das System die Ursprungsquelle gruppieren und bestimmen |
2. Select Analyzer Lib | Um die richtige Bibliothek auszuwählen, die der VUE -Version Ihres Projekts entspricht |
3. Prepare Alias Paths | So sammeln Sie alle Aliase von TS-, JS- und VITE -Konfigurationsdateien, die für den Ersatz in den Anweisungen "Import" verwendet werden sollen |
4. Analyze Component Files | Für jede Dateierweiterung sammelt das System Komponenteninformationen, einschließlich Requisiten |
5. Optimize Analyzed Results | Basierend auf den Komponenteninformationen werden Verbesserungen vorgenommen, indem Duplikate entfernt und das Komponentenprofil strukturierter formatiert werden |
Im Folgenden finden Sie die Hauptmethoden in der GitService -Klasse:
| Verfahren | Beschreibung |
|---|---|
gitScanner | Initiieren Sie die Befehle von GIT -Protokoll -Shell zum Scannen, die durch gitMapping verwendet werden. |
gitMapping | Verwenden Sie das Ergebnis von gitScanner zum Vergleich des Komponentennamens und des Git -Protokoll -Dateinamens. Wenn beide übereinstimmen, aktualisieren die GIT -Informationen in das jeweilige Komponentenprofil. |
Plugins von Drittanbietern werden automatisch aus Berryjams Paket geladen.json
Weitere Informationen finden Sie im Dokumentationsordner.
Wir sind dankbar und dankbar für alle Arten von Beiträgen. Egal, ob Sie uns helfen, Fehler zu melden oder zu beheben, neue Funktionen vorzuschlagen, unsere Dokumentation zu verbessern oder das Wort zu verbreiten - wir würden uns freuen, Sie als Teil der Berryjam -Community zu haben. Weitere Informationen finden Sie in unserem beitragenden Leitfaden und unserem Verhaltenskodex.
Wenn Sie sofort einen Beitrag leisten möchten, navigieren Sie zur Registerkarte Github Issues und beginnen Sie mit interessanten Problemen. Sie können zunächst an Themen arbeiten, die unter documentation und good first issue gekennzeichnet sind.
Wenn Sie bei der Verwendung von Berryjam einen Fehler oder ein Problem begegnen, haben Sie eine Idee, wie Berryjam besser ist, oder Sie schauen sich die Dokumentation durch und denken, dass es verbessert werden könnte ... Bitte zögern Sie nicht, ein Problem einzureichen?
Wenn Sie ein Vue.js -Entwickler sind, der mit Node.js. nicht vertraut ist, können Sie ein Beispiel für ein Problem mit code example einreichen, um die VUE -Komponenten zu erstellen. Weitere Informationen finden Sie in unseren integrierten Rülen.
Wir helfen Ihnen gerne gerne. Wenn Sie Fragen haben, Fehler treffen oder Probleme haben, können Sie sich gerne um Hilfe bei Berryjam -Zwietracht bitten. Alles, was mit Berryjam zu tun hat, steht auf dem Tisch!
Berryjam wird unter MIT -Lizenz verteilt. Weitere Informationen finden Sie in unserer lizenz.md -Datei.
