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 （可选） | 启用详细的扫描信息。 |
debug | boolean （可选） | 在调试模式下操作扫描仪，提供调试信息。 |
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用于扫描一个项目以进行组件配置文件。它将从package.json文件及其各自的支持文件中提取相关的相对值，例如源，文件路径，组件名称，以转换或归一化将其映射到每个组件配置文件的原始组件数据。
GitService如果项目具有.git文件夹，它将查找与GIT相关的信息，例如作者和DateTime以及映射到每个组件配置文件。
在VueScanner类中，您可以打电话给scan()方法开始扫描。该方法包括5个主要步骤。如下：
| 步 | 描述 |
|---|---|
1。 Group by Related Package.Json | 由于有多个软件包。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 shell命令进行扫描，该命令将通过gitMapping使用。 |
gitMapping | 使用gitScanner的结果比较组件名称和GIT日志文件名。如果两者都匹配，则GIT信息将更新到相应的组件配置文件中。 |
第三方插件将自动从Berryjam的软件包中加载。
有关更多信息，请参阅文档文件夹。
我们感谢所有类型的贡献。无论您是在帮助我们报告还是修复错误，提出新功能，改进我们的文档或传播这个词 - 我们希望将您作为Berryjam社区的一部分。请参阅我们的贡献指南和行为准则。
如果您想立即开始贡献，请导航到GitHub问题选项卡，并开始查看有趣的问题。您可能会首先处理documentation和good first issue标记的问题。
如果您在使用Berryjam时会遇到错误或问题，您会想到如何更好地berryjam或您正在查看文档并认为可以改进的文档...请不要犹豫地提交问题？
如果您是不熟悉node.js.的vue.js开发人员，则可以提交标有问题的code example ，涉及您如何创建VUE组件。查看我们的内置室以获取更多详细信息。
我们很乐意为您提供帮助。如果您有任何疑问，请遇到任何错误或遇到任何问题，请随时在Berryjam Discord中寻求帮助。与Berryjam有关的任何东西都在桌子上！
Berryjam是根据MIT许可分发的。有关更多详细信息，请参阅我们的许可证文件。
