berryjam
0.1.0-alpha.64
Проблемы - Присоединяйтесь к нашему Discord - Лицензия - BerryJam Cloud
Доступно для: vue.js (3.x), nuxt (3.x)
BerryJam предоставляет простой способ определить использование вашего компонента, реквизит и их отношения. Основываясь на выводе от вашего сканирования, вы можете создать свою собственную панель панели и запустить анализ в компонентах своего проекта, чтобы улучшить коммуникации в вашей команде разработчиков.
1. Сканируйте свой проект на предмет компонентов  | 2. Анализ компонентов и их отношений  |
3. Сканировать журнал GIT для автора и DateTime  | 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 Project, пожалуйста, убедитесь, что у вас есть папка .nuxt перед сканированием.
Функция VueScanner принимает два параметра следующим образом:
VueScannerOption . Вот подробное описание каждого доступного опции в интерфейсе VueScannerOption :
| Свойство | Тип | Описание |
|---|---|---|
appDir | string | Путь каталога проекта будет отсканирован. |
output | OutputFormat (необязательно) | Желаемый выходной формат отсканированного результата. (JSON по умолчанию) |
ignore | string[] (необязательно) | Массив имен файлов или имен каталогов, чтобы исключить из сканирования. |
verbose | boolean (необязательно) | Включите режим словеса для более подробной информации о сканировании. |
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, и MAP для каждого профиля компонента.
В классе 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 для использования для замены в операторах «Импорт» |
4. Analyze Component Files | Для каждого расширения файла система будет собирать информацию о компоненте, включая реквизиты |
5. Optimize Analyzed Results | На основании информации компонента улучшения производятся путем удаления дубликатов и форматирования профиля компонента более структурированным образом |
Ниже приведены основные методы в классе GitService :
| Метод | Описание |
|---|---|
gitScanner | Инициировать команды оболочки GIT Log для сканирования, которые будут использоваться gitMapping . |
gitMapping | Используя результат gitScanner для сравнения имени компонента и имени журнала GIT. Если оба совпадают, информация GIT будет обновлена в соответствующий профиль компонентов. |
Сторонние плагины загружаются автоматически из BerryJam's Package.json
Для получения дополнительной информации, пожалуйста, обратитесь к папке документации.
Мы благодарны и благодарны за все виды вкладов. Независимо от того, помогаете ли вы сообщать или исправлять ошибки, предлагать новые функции, улучшать нашу документацию или распространять слово - мы хотели бы, чтобы вы в качестве части сообщества BerryJam. Пожалуйста, обратитесь к нашему руководству по внесению и кодексу поведения.
Если вы хотите сразу начать вклад, перейдите на вкладку «Проблемы GitHub» и начните просматривать интересные проблемы. Вы можете начать с работы по вопросам, помеченным в соответствии с documentation и good first issue .
Если вы столкнетесь с ошибкой или проблемой при использовании BerryJam, у вас есть идея о том, как лучше BerryJam или, возможно, вы просматриваете документацию и думаете, что ее можно улучшить ... Пожалуйста, не стесняйтесь представить проблему?
Если code example разработчик Vue.js, который не знаком с node.js. Проверьте наши встроенные правила для получения более подробной информации.
Мы более чем рады вам помочь. Если у вас есть какие -либо вопросы, сталкиваются с любыми ошибками или сталкиваются с любыми проблемами, пожалуйста, не стесняйтесь обращаться за помощью в Berryjam Discord. Все, что связано с Берриджамом, находится на столе!
BerryJam распределен по лицензии MIT. Пожалуйста, обратитесь к нашему файлу License.md для получения более подробной информации.
