berryjam
0.1.0-alpha.64
ปัญหา - เข้าร่วม Discord ของเรา - ใบอนุญาต - Berryjam Cloud
มีให้สำหรับ: vue.js (3.x), nuxt (3.x)
BerryJam เป็นวิธีง่ายๆในการระบุการใช้งานส่วนประกอบอุปกรณ์ประกอบฉากและความสัมพันธ์ของพวกเขา จากผลลัพธ์จากการสแกนของคุณคุณสามารถสร้างแดชบอร์ดของคุณเองและเรียกใช้การวิเคราะห์ข้ามส่วนประกอบโครงการของคุณเพื่อปรับปรุงการสื่อสารในทีมพัฒนาของคุณ
1. สแกนโครงการของคุณสำหรับส่วนประกอบ  | 2. วิเคราะห์ส่วนประกอบและความสัมพันธ์ของพวกเขา  |
3. บันทึกการสแกน GIT สำหรับผู้แต่งและวันเวลา  | 4. ตรวจจับอุปกรณ์ประกอบฉากโดยอัตโนมัติสำหรับแต่ละองค์ประกอบ  |
BerryJam ไม่สามารถใช้งานได้กับ Vue 2 หรือต่ำกว่ารุ่น
Berryjam ได้รับการทดสอบอย่างเต็มที่เพื่อทำงานกับโหนดเวอร์ชันจาก 16.0 ถึง 18.17.1 (LTS) รุ่นที่สูงกว่า 18.17.1 (LTS) ควรทำงานได้ดี แต่ยังไม่ได้รับการทดสอบอย่างเต็มที่
มีสองสามวิธีที่คุณสามารถติดตั้ง BerryJam ได้แก่ NPM, PNPM และเส้นด้าย หากคุณติดตั้งผ่าน NPM นี่คือ CMD เดียวที่จะติดตั้งไลบรารีนี้
npm install berryjam 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 :
| คุณสมบัติ | พิมพ์ | คำอธิบาย |
|---|---|---|
appDir | string | เส้นทางของไดเรกทอรีโครงการที่จะสแกน |
output | OutputFormat (ไม่บังคับ) | รูปแบบผลลัพธ์ที่ต้องการของผลลัพธ์ที่สแกน (JSON โดยค่าเริ่มต้น) |
ignore | string[] (ไม่บังคับ) | อาร์เรย์ของชื่อไฟล์หรือชื่อไดเรกทอรีที่จะแยกออกจากการสแกน |
verbose | boolean (ไม่บังคับ) | เปิดใช้งานโหมด verbose สำหรับข้อมูลการสแกนโดยละเอียดเพิ่มเติม |
debug | boolean (ไม่บังคับ) | ดำเนินการสแกนเนอร์ในโหมดดีบักให้ข้อมูลการดีบัก |
ประเภท OutputFormat แสดงถึงรูปแบบเอาต์พุตที่มีอยู่
| พิมพ์ | คำอธิบาย |
|---|---|
"json" | เอาต์พุตผลลัพธ์ที่สแกนในรูปแบบ JSON และบันทึกเป็น 'Component-Profiles.json' ภายใน 'AppDir' |
"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 มันจะค้นหาข้อมูลที่เกี่ยวข้องกับ GIT เช่นผู้แต่งและ DateTime และแผนที่ไปยังโปรไฟล์ส่วนประกอบแต่ละตัว
ภายในคลาส VueScanner คุณสามารถเรียกใช้วิธี scan() เพื่อเริ่มการสแกน วิธีการครอบคลุม 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 :
| วิธี | คำอธิบาย |
|---|---|
gitScanner | เริ่มต้นคำสั่ง GIT Log Shell เพื่อสแกนซึ่งจะใช้โดย gitMapping |
gitMapping | การใช้ผลลัพธ์จาก gitScanner เพื่อเปรียบเทียบชื่อส่วนประกอบและชื่อไฟล์บันทึก GIT หากทั้งคู่จับคู่ข้อมูล GIT จะอัปเดตลงในโปรไฟล์ส่วนประกอบที่เกี่ยวข้อง |
ปลั๊กอินของบุคคลที่สามจะถูกโหลดโดยอัตโนมัติจากแพ็คเกจของ Berryjam
สำหรับข้อมูลเพิ่มเติมโปรดดูที่โฟลเดอร์เอกสาร
เรารู้สึกขอบคุณและขอบคุณสำหรับการมีส่วนร่วมทุกประเภท ไม่ว่าคุณจะช่วยเรารายงานหรือแก้ไขข้อบกพร่องเสนอคุณสมบัติใหม่ปรับปรุงเอกสารของเราหรือกระจายคำ - เรายินดีที่จะให้คุณเป็นส่วนหนึ่งของชุมชน Berryjam โปรดดูคู่มือการสนับสนุนและจรรยาบรรณของเรา
หากคุณต้องการที่จะเริ่มมีส่วนร่วมทันทีให้ไปที่แท็บปัญหา GitHub และเริ่มมองหาปัญหาที่น่าสนใจ คุณสามารถเริ่มต้นด้วยการทำงานกับปัญหาที่ระบุไว้ภายใต้ documentation และ good first issue
หากคุณพบข้อผิดพลาดหรือปัญหาในขณะที่ใช้ Berryjam คุณมีความคิดเกี่ยวกับวิธีการที่ดีกว่า Berryjam หรือบางทีคุณกำลังมองหาเอกสารและคิดว่ามันจะดีขึ้น ... โปรดอย่าลังเลที่จะส่งปัญหา?
หากคุณเป็นนักพัฒนา Vue.js ที่ไม่คุ้นเคยกับ Node.js. คุณสามารถส่ง code example ที่มีป้ายกำกับเกี่ยวกับวิธีการสร้างส่วนประกอบ Vue ตรวจสอบรายละเอียดเพิ่มเติมในตัวของเรา
เรามีความสุขมากกว่าที่จะช่วยเหลือคุณ หากคุณมีคำถามใด ๆ พบข้อผิดพลาดใด ๆ หรือประสบปัญหาใด ๆ โปรดขอความช่วยเหลือใน Berryjam Discord สิ่งที่เกี่ยวข้องกับ Berryjam อยู่บนโต๊ะ!
Berryjam แจกจ่ายภายใต้ใบอนุญาต MIT โปรดดูไฟล์ License.md ของเราสำหรับรายละเอียดเพิ่มเติม
