1. 运行 启动开发服务 dev-server
2. 在脚本的设置面板 - 组件详情中, 从右下角的菜单中选择 开始调试.
3. 找到对应的代码文件修改, 可以搜索组件的 name 或 displayName 定位文件, 修改后会自动更新.

本体内容的新增, 可以在 src/ 中进行, v2 中不再有 v1 的奇怪限制, 你可以直接增加文件, 在代码中使用 import / export 等.

在 registry/lib/components 中是所有组件的源代码.

你可能还发现 src/components 中也有一些组件, 这些是内置组件, 无法独立安装/卸载.

1. 根据类别进入对应的子文件夹, 如样式修改的功能就是 style/

2. 新建文件夹, 名称为组件名, 单词短横线分隔

3. 新建文件 index.ts 作为组件入口点

   此名称不可更改, webpack 配置中将搜索所有 index.ts 作为组件编译入口

4. 在 index.ts 中导出 component 对象, 用 defineComponentMetadata 定义组件.

   import { defineComponentMetadata } from '@/components/define'
   
   export const component = defineComponentMetadata({
     // ...
   })
   import { defineComponentMetadata } from '@/components/define'
   
   export const component = defineComponentMetadata({
     // ...
   })
   

   所需要的字段在 @/components/types.ts 的 ComponentMetadata 中，源码中有各属性的说明.

   其中 options 字段的类型为同文件中的 OptionsMetadata.

   在 @/components/define.ts 中还提供了几个方法用于辅助定义.

   author 字段记得填, 这个因为我自己写的组件不需要所以就不是 required 的

5. 根据组件的复杂度, 可以自行在文件夹中创建其他文件来组织代码, 下方还列出了一些可用资源可以帮助你加快开发.

6. 运行任务 功能:编译组件 prod:build-components, (插件运行 功能:编译插件 prod:build-plugins), 任务会询问要编译的组件是哪个, 从列表中选择即可.

7. 然后运行 启动开发服务 dev-server, 访问 http://localhost:23333/registry/dist, 可以找到组件的 localhost 连接.

8. 进入 b 站, 打开脚本的设置面板 - 组件管理, 粘贴组件的链接并安装.

9. 后续同 修改 中的 2 ~ 3 步.

在 registry/lib/plugins 中是所有插件的源代码, 步骤和组件基本一致, 只有在第 4 步中, 导出的是 plugin 对象, 实现 PluginMetadata 接口.

关于如何判断要实现的是组件还是插件, 可以想想这个功能能否独立存在, 插件的定位是是增强组件的功能, 如果要开发的功能在没有安装某个组件的情况下毫无作用, 那么它就应该是一个插件; 如果可以独立存在并发挥一些作用, 那么它就应该是一个组件.