berryjam
0.1.0-alpha.64
Masalah - Bergabunglah dengan Perselisihan Kami - Lisensi - Berryjam Cloud
Tersedia untuk: vue.js (3.x), nuxt (3.x)
Berryjam menyediakan cara sederhana untuk mengidentifikasi penggunaan komponen, alat peraga, dan hubungan mereka. Berdasarkan output dari pemindaian Anda, Anda dapat membuat dasbor Anda sendiri dan menjalankan analisis di seluruh komponen proyek Anda untuk meningkatkan komunikasi di seluruh tim pengembangan Anda.
1. Pindai proyek Anda untuk komponen  | 2. Menganalisis komponen dan hubungannya  |
3. Pindai log git untuk penulis dan datetime  | 4. Secara otomatis mendeteksi alat peraga untuk setiap komponen  |
Berryjam tidak kompatibel dengan Vue 2 atau versi yang lebih rendah.
Berryjam telah sepenuhnya diuji untuk bekerja dengan versi node dari 16.0 hingga 18.17.1 (LTS) . Versi di atas 18.17.1 (LTS) harus bekerja juga tetapi belum sepenuhnya diuji.
Ada beberapa cara Anda dapat menginstal Berryjam, yaitu NPM, PNPM dan Benang. Jika Anda menginstal melalui NPM, berikut adalah satu CMD untuk menginstal pustaka ini
npm install berryjam pnpm add berryjam yarn add berryjam Untuk mulai memindai proyek Anda, pertama -tama Anda harus mengimpor kelas VueScanner dan membuat contohnya.
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 ( ) ;
} Catatan: Untuk proyek Nuxt , harap pastikan Anda memiliki folder .nuxt sebelum pemindaian.
Fungsi VueScanner mengambil dua parameter sebagai berikut:
VueScannerOption . Berikut adalah deskripsi terperinci dari setiap opsi yang tersedia dalam antarmuka VueScannerOption :
| Milik | Jenis | Keterangan |
|---|---|---|
appDir | string | Jalur direktori proyek yang akan dipindai. |
output | OutputFormat (opsional) | Format output yang diinginkan dari hasil yang dipindai. (Json secara default) |
ignore | string[] (opsional) | Array nama file atau nama direktori untuk dikecualikan dari pemindaian. |
verbose | boolean (opsional) | Aktifkan mode verbose untuk informasi pemindaian yang lebih rinci. |
debug | boolean (opsional) | Operasi pemindai dalam mode debug, memberikan informasi debugging. |
Jenis OutputFormat mewakili format output yang tersedia.
| Jenis | Keterangan |
|---|---|
"json" | Output hasil yang dipindai dalam format JSON dan disimpan sebagai 'component-profiles.json' di dalam 'appdir'. |
"stdout" | Tampilkan hasil yang dipindai langsung di konsol (stdout). |
Opsi dan jenis ini menawarkan fleksibilitas dan kustomisasi saat menggunakan fungsi VueScanner untuk menganalisis proyek VUE.js.
Untuk detail lebih lanjut tentang kelas VueScanner , silakan lihat di bawah ini.
Dengan memanggil metode scan , itu akan memindai komponen VUE dan mengembalikan ComponentProfile[] . Berikut adalah contoh penampilannya. Untuk tujuan demonstrasi, kami telah memindai proyek open-source bernama 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 "
}
},
] Perpustakaan menggunakan Nodejs , TypeScript dan Jest untuk pengembangan. Karena ini adalah alat untuk mendeteksi komponen VUE, Anda dapat menemukan aturan tentang bagaimana komponen VUE di folder built-in-rules.
Berryjam berisi 2 kelas, yaitu:
VueScanner - gunakan untuk memindai proyek untuk profil komponen. Ini akan mengekstraksi nilai relatif yang relevan seperti sumber, jalur file, nama komponen dari file package.json dan file masing -masing yang didukung untuk mengubah atau menormalkan data komponen mentah yang akan dipetakan ke setiap profil komponen.
GitService - Jika proyek memiliki folder .git, itu akan mencari informasi terkait git seperti penulis dan datetime dan peta ke setiap profil komponen.
Dalam kelas VueScanner , Anda dapat memanggil metode scan() untuk mulai memindai. Metode ini mencakup 5 langkah utama. Ada sebagai berikut:
| Melangkah | Keterangan |
|---|---|
1. Group by Related Package.Json | Karena ada beberapa file package.json dan file yang didukung ( .vue , .js , .jsx , .ts , .tsx dan semua file dari folder .nuxt (jika ada)), sistem akan mengelompokkan dan menentukan sumber asal |
2. Select Analyzer Lib | Untuk memilih perpustakaan yang tepat yang cocok dengan versi vue proyek Anda |
3. Prepare Alias Paths | Untuk mengumpulkan semua alias dari file ts, js dan vite config untuk digunakan untuk penggantian dalam pernyataan 'impor' |
4. Analyze Component Files | Untuk setiap ekstensi file, sistem akan mengumpulkan info komponen, termasuk alat peraga |
5. Optimize Analyzed Results | Berdasarkan info komponen, perbaikan dilakukan dengan menghapus duplikat dan memformat profil komponen dengan cara yang lebih terstruktur |
Di bawah ini adalah metode utama di kelas GitService :
| Metode | Keterangan |
|---|---|
gitScanner | Memulai perintah Git Log Shell untuk memindai yang akan digunakan oleh gitMapping . |
gitMapping | Menggunakan hasil dari gitScanner untuk membandingkan nama komponen dan nama file log git. Jika keduanya cocok, informasi GIT akan diperbarui ke profil komponen masing -masing. |
Plugin pihak ketiga dimuat secara otomatis dari paket berryjam.json
Untuk informasi lebih lanjut, silakan merujuk ke folder dokumentasi.
Kami berterima kasih dan menghargai semua jenis kontribusi. Apakah Anda membantu kami melaporkan atau memperbaiki bug, mengusulkan fitur -fitur baru, meningkatkan dokumentasi kami atau menyebarkan berita - kami akan senang memiliki Anda sebagai bagian dari komunitas Berryjam. Silakan merujuk ke Panduan Kontribusi dan Kode Etik kami.
Jika Anda ingin mulai berkontribusi segera, navigasikan ke tab Masalah GitHub dan mulai melihat -lihat masalah menarik. Anda dapat memulai dengan mengerjakan masalah yang diberi label di bawah documentation dan good first issue .
Jika Anda mengalami kesalahan atau masalah saat menggunakan Berryjam, Anda memiliki ide tentang cara lebih baik Berryjam atau mungkin Anda melihat -lihat dokumentasi dan berpikir bahwa itu dapat ditingkatkan ... tolong jangan ragu untuk mengirimkan masalah?
Jika Anda adalah pengembang VUE.JS yang tidak terbiasa dengan Node.js., Anda dapat mengirimkan code example berlabel masalah tentang cara Anda membuat komponen VUE. Lihatlah aturan bawaan kami untuk detail lebih lanjut.
Kami sangat senang membantu Anda. Jika Anda memiliki pertanyaan, mengalami kesalahan apa pun atau menghadapi masalah apa pun, jangan ragu untuk meminta bantuan di Berryjam Perselisihan. Apa pun yang terkait dengan Berryjam ada di atas meja!
Berryjam didistribusikan di bawah lisensi MIT. Silakan merujuk ke file lisensi.md kami untuk lebih jelasnya.
