思源笔记轻量级插件开发模板(零依赖、零构建)

📌 项目背景

在思源笔记插件开发中,官方或第三方模板通常依赖大量开源库和构建工具。即使是简单的 plugin-sample 构建后也需要 100+MB 的空间占用。对于功能简单、UI 界面不复杂的插件来说,这显得有些"杀鸡用牛刀"。

对于新手开发者而言,这些模板带来了额外的学习负担:

  • 需要理解复杂的工具链(Webpack、Vite、TypeScript 等)
  • 面对各种配置文件和依赖管理问题
  • 频繁的报错消耗开发热情,最终"从未入门到放弃"

有没有更简单的方式? 答案是肯定的!

本项目提供了一个纯原生 JavaScript 插件开发模板,无需复杂依赖和构建工具,让你可以直接上手编写插件代码。

⚠️ 适用场景说明

  • 适合:功能简单、UI 简洁、依赖少的轻量级插件
  • 不适合:需要复杂 UI 组件库(如 React/Vue)或大量第三方依赖的项目

🔗 项目地址

GitHub: https://github.com/wish5115/my-plugin

📁 目录结构

my-plugin/
├── node_modules/           # 插件依赖包(仅用于 IDE 开发提示,别担心,空间占用很小,仅100+KB)
├── i18n/                   # 国际化语言文件
│   ├── en_US.json          # 英文翻译
│   └── zh_CN.json          # 简体中文翻译
├── icon.png                # 插件图标(建议尺寸:160x160)
├── preview.png             # 插件预览图
├── index.js                # 插件主逻辑代码
├── index.css               # 插件样式文件
├── plugin.json             # 插件配置文件(必需)
├── build.sh                # Linux/macOS 打包脚本
├── build.bat               # Windows 打包脚本
├── LICENSE                 # 开源协议
├── README.md               # 英文说明文档
└── README_zh_CN.md         # 中文说明文档
└── .hotreload              # 当有该文件时会自动开启热加载

🚀 快速开始

1. 克隆或下载模板

git clone https://github.com/wish5115/my-plugin.git
cd my-plugin

2. 修改插件信息

编辑 plugin.json 文件,修改插件名称、描述、作者等信息:

{
  "name": "my-plugin",
  "author": "你的名字",
  "url": "https://github.com/你的用户名/my-plugin",
  "version": "0.0.1",
  "displayName": {
    "default": "My Plugin",
    "zh_CN": "我的插件"
  },
  "description": {
    "default": "A simple plugin template",
    "zh_CN": "一个简单的插件模板"
  }
}

3. 开发插件功能

index.js 中编写你的插件逻辑,在 index.css 中添加样式。

4. 打包插件

Windows 用户:

build.bat

Linux/macOS 用户:

chmod +x build.sh
./build.sh

打包完成后会生成 package.zip 文件,可以直接上传到 GitHub Release 或分享给其他用户。

🔄 开发调试

方法一:手动刷新(推荐)

修改代码后,在思源笔记开发控制台按 Ctrl/Cmd + R 刷新页面即可看到效果。

方法二:热加载脚本(实验性)

我编写了一个热加载脚本,可以自动检测文件变化并重新加载插件。

使用步骤:

  1. 下载脚本:hot-reload.js
  2. 修改脚本中的工作空间路径和 API Token
  3. 运行:node hot-reload.js

⚠️ 注意
目前思源笔记的开启/关闭插件 API 存在一个已知 bug,热加载功能需要等待官方 3.5.0+ 修复后才能稳定使用。建议暂时使用"刷新页面"的方式进行调试。

你也可以将热加载功能封装成一个独立插件,欢迎贡献!

✅ 优点

  • 极致轻量:无需 node_modules 构建依赖,整个项目仅几百 KB
  • 零门槛:只需要懂 HTML/CSS/JavaScript 基础即可开发
  • 快速迭代:修改即生效,无需等待编译过程
  • 结构清晰:文件结构一目了然,易于理解和维护
  • 适合学习:非常适合新手入门插件开发

❌ 局限性

  • 依赖管理:目前主流类库多以模块化(ESM/CommonJS)方式提供,使用传统 <script> 标签引入需要特殊处理
  • 构建优化:缺少代码压缩、Tree Shaking 等现代构建优化
  • 类型检查:无 TypeScript 支持,缺少编译时类型检查
  • 复杂场景:不适合需要大量外部依赖或复杂 UI 框架的项目

如果你的插件需要以下功能,建议使用官方或第三方完整模板:

  • React/Vue/Svelte 等前端框架
  • 大量 npm 包依赖
  • TypeScript 类型支持
  • 复杂的构建流程

💡 适用场景示例

  • 简单的快捷命令插件
  • 文本处理工具
  • 自定义快捷键绑定
  • 简单的 UI 扩展(如顶栏按钮)
  • 数据导出/导入工具
  • 轻量级主题调整

📚 相关资源

🤝 贡献

如果你喜欢这个模板或者这个模板帮助到了你,不妨给个 Star ⭐

📄 开源协议

本项目采用 MIT 协议开源,详见 LICENSE 文件。

🙏 致谢

感谢思源笔记团队提供的优秀插件系统,感谢所有为简化插件开发而努力的开发者们!

祝你开发愉快!🎉

以上由 Claude-Sonnet4.5 整理和撰写

  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    28442 引用 • 119754 回帖
  • 插件开发
    5 引用 • 29 回帖
1 操作
wilsons 在 2025-12-09 12:51:30 更新了该帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • 过于硬核,唯有膜拜

  • stevehfut

    w 佬终于要入手插件开发了吗 😭

    1 回复
  • wilsons 1

    小试了一下,简单做了图片编辑工具

    https://github.com/wish5115/siyuan-image-studio

    不过,目前主要精力不在这,短时间内可能不会花太多时间写思源代码了。

    这个插件模板也是之前写的,现在整理完善了下。

  • 官方 100MB?不对吧

    1 回复
  • 看完了再评。虽然初衷很好,但是实际上最后还是要回到 svelte 和 vue 模板的怀抱。否则很多东西还得各种折腾。

    虽然这样能锻炼一个人的开发能力,但是都不属于开发插件时的主线了。比如 hotReload 这样的工具,完全不需要也不应该再以一个“插件”的形式出现了,f 佬 svelte 模板和我那个 vue 模板,都已经自带了,并且处理了本地开发和生产发布时的逻辑。以及发布时的更新版本号的流程等。

    我负责的那个 vue 模板,虽然因为没有相关解释,小白在实际使用时还会有一点坎坷。除了不方便“借鉴”现有插件的代码以外,实际上各方面都挺舒服的,尤其是完整版的(叶归的代码)。

  • wilsons

    不是吗?我这里官方默认安装依赖和构建完毕

    image.png

    1 回复
  • node_modules 是本地开发时的一些依赖库的代码,大项目上 G 的情况都会出现。但实际上生产版本会经过专门的处理,最终的包大小只在几 MB 左右。比如叶归我记得总共也就 2MB 不到的样子(除去发布功能)。

    1 回复
  • Wetoria 1 1 赞同 2 评论

    再补充说一下,等插件开发的功能越多、越深,各种逻辑的封装(hooks)、各种 UI 组件的封装,都会出现,最终要么用思源自带的 UI 样式,要么引入 UI 库,要么自己封装。最后还是要上升到模板库这类项目了。

    Vue 模板虽然没更新,一方面是因为没啥人使用,没有反馈给到我这边(目前的版本,如果了解细节的话,实际上已经够用了)。另一方面我忙 + 各种技术细节也在研究,像思源内部 API 的使用,最近也封装了 https://www.npmjs.com/package/@wetoria/siyuan-sdk。以及未来可能要做的一些思源内部逻辑相关的代码、UI 组件等。

    最近这个把月的时间,就是在重构叶归的代码,平衡这些事情。


    继续补充一点,做模板是好意,我也很认可。但是这个模板库,实在容易让人跑偏,等到未来插件起来了以后再从头维护的时候,就知道有多痛苦了。

    我的看法是,未来人人会需要一个自己的插件,svelte 和 Vue 这两个模板库都够了,对不会技术的小白也更友好。

    如果只是开发一些小功能,你这个模板挺好的,随时创建一个可用的版本。

    但是最终的结果会出现两种情况:

    1. 一堆小功能的插件,不同插件之间需要维护相同的代码。不同插件之间需要考虑代码冲突(现在的思源,代码片段,不同插件之间都已经会出现这个问题)
    2. 集中所有功能形成自己的工具箱。那么就又会出现我前面说的,要处理一系列的版本维护、代码封装问题。
    说的没错,但我觉得这个模板基本上没有人用,仅仅我个人偶尔用用罢了,把一些代码片段不方便实现的放里面,哈哈。我一般能不用 UI 的尽量不用,能简单的就不复杂,能不用依赖的就不用,能用 cdn 的就先用着,哈哈。确实,小而美虽好但不适合分享,如果分享就要存在很多通用副本,不过可以先分享基础库,提醒用户其他脚本要依赖基础库,但肯定没集成方便,但集成也会造成功能堆砌,可能用户不需要的功能页被迫安装了。各有利弊吧。
    wilsons
    @wilsons 没啥问题。就当我在这个帖子下留下足够的信息吧。
    Wetoria
  • wilsons

    实际上最后还是要回到 svelte 和 vue 模板的怀抱......

    你说的没错,这里指的是较少界面开发和简单功能开发,较少涉及第三方依赖等。

    模块开发对有经验的开发确实更方便快捷,但对新手来说学习成本高,先能动手做东西,慢慢在学习中入门,再踏入更高层次。另外一点,就是占用空间,小功能也无需动辄占用 100 甚至几百 M 空间,除非开发完就删除依赖,需要时再安装,也麻烦不是。

    生产版本会经过专门的处理,最终的包大小只在几 MB 左右。。。。。。

    是的,我这里说的不是发布版本或打包后的文件占用,是指开发时文件占用。

    我电脑较老,空间有限,外接硬盘不方便,且暂时没有更换打算,只是硬盘小,其他还行,因此对空间占用较敏感,现在软件占用太大了,很多开发占用惊人,尤其是 docker 和 ai 时代,根本装不了几个。

    1 回复
  • 情况能理解。给你我这里我自己所有项目(四五个吧)加起来的占用,用作参考。这是我所有项目加在一起的(monorepo 架构)。我用过老旧的 Mac,600M 的大小,挤一挤还是能有的。只不过开发过程中,可能需要退掉一些不必要的软件,免得运行内存不够。(跟这 600 没关系,属于另外的情况了)。

    image.png

    1 回复
  • wilsons

    你还别说,我还真开发时偶尔重启下浏览器,vscode,思源等,就是为了缓解资源占用 😄 。

    这些软件运行一久空间能占用 10 多 G,尤其是浏览器。

    1 回复
  • yuxinzhao 1 赞同

    感谢分享。

    不过个人觉得把 vite-vue 模板里的 vue 去掉留个 vite 就很好用了(。・ω・。),几个插件都是这么开发的。

    ts 检查也是蛮有必要的,不然真的是写时一时爽,运行火葬场,非编译型语言是这样的。

    感觉插件新手开发最缺的是文档和示例,如果有人能整合各种小功能在插件中的编写示例就好了

    1 回复
  • doge 17G 的思源见过吗?我玩出来过。交换内存我都干到过 24 G。反正在 Mac 上,大多数时候我很少碰到卡到不能用的时候。

    6
    wilsons
  • doge 你都这样了,为什么不直接用 f 佬的 vite 模板

    1 回复
  • zuoez02 1 评论

    最初的插件都是直接手搓 index.js 和 index.css 的,直接在 plugins 目录里写就完了,啥都不用 😂

    就算是现在,我的插件库里有好多都是我直接手搓的

    6 还得是大佬 返璞归真 不过 ai 时代,简单的 UI 直接让 ai 搓一个,非工程化代码反而更方便:)
    wilsons
  • 能把思源插件如何开发讲清除就很强了,好多个帖子,看的人混乱

    1 回复
  • wilsons

    插件开发入门 | 思源社区文档

    插件开发快速指南 | 思源社区文档

    我觉得看完这两个就已经很清晰了吧,至少入门了,至于具体使用示例或细节就需要慢慢摸索了。

    当然前提是有一定的前端开发知识,如果零基础还是有难度的。

  • yuxinzhao

    啊?原来有现成的 vite 模板吗,之前不知道,以为只有 vite-svelte 和 vite-vue,没有单独 vite 的 😅

    1 回复
  • 有的,我确认了一下,vue 里丢掉了这个信息,官方的没录入,svelte 里有列

请输入回帖内容 ...