Joplin 插件开发入门:使用 generator-joplin 脚手架从零搭建可发布插件 Joplin 插件开发入门使用 generator-joplin 脚手架从零搭建可发布插件【免费下载链接】joplinJoplin - the privacy-focused note taking app with sync capabilities for Windows, macOS, Linux, Android and iOS.项目地址: https://gitcode.com/GitHub_Trending/jo/joplin本文是 Joplin 插件脚手架工具 generator-joplin 的完整使用指南核心面向希望在 JoplinWindows / macOS / Linux / Android / iOS 全平台笔记应用上开发插件的开发者。阅读本文后你将掌握用 Yeoman 生成插件骨架、理解/src/index.ts与manifest.json等关键文件结构、完成 Webpack 构建产出 JPL 安装包、同步版本号、发布到官方插件仓库以及通过plugin.config.json编译内容脚本content script与 Webview 脚本的完整实战流程。文中所有结论均可在 packages/generator-joplin 目录的源码与模板、以及仓库内置的 note_list_renderer 示例插件 中得到验证。生成器是什么generator-joplin是一个基于 Yeoman 的 Joplin 插件项目脚手架scaffold工具其官方描述为 Scaffolds out a new Joplin plugin。它在 Joplin 仓库中位于 packages/generator-joplin核心实现是 generators/app/index.js 中继承自yeoman-generator的 Generator 类依赖chalk、yosay、slugify、yeoman-generator等包见 package.json。它解决的核心痛点包括手工搭建成本高插件需要同时维护 TypeScript 入口、Webpack 构建链、manifest 清单、API 类型声明等多套文件手工初始化极易出错版本同步繁琐插件版本号同时存在于package.json与manifest.json需要保持一致发布规范隐蔽官方插件仓库对包名、关键词、publish 目录有硬性要求生成器会自动把这些规范配置好。仓库中的 note_list_renderer 示例插件 就是由这类生成器产出的完整样例其目录结构src/、api/、plugin.config.json、webpack.config.js、tsconfig.json、package.json与生成器模板一一对应可作为本文所有讲解的落地参照。安装与生成新插件项目前置条件使用前需已安装 Node.js 与 npm。生成器对 npm 的版本要求为 4.0.0见 generator-joplin 的 package.json 中engines字段。安装 Yeoman 与生成器npm install -g yo npm install -g generator-joplin生成插件项目yo --node-package-manager npm joplin--node-package-manager npm明确指定使用 npm 作为包管理器避免交互式询问。运行后生成器会依次向你询问以下信息对应 generators/app/index.js 中的prompting()阶段提问项含义说明pluginId插件唯一 ID必须全局唯一如com.example.MyPlugin或一段 UUIDpluginName插件显示名称用户友好的字符串将显示在 Joplin UI 中pluginDescription插件描述将写入 manifest 的description字段pluginAuthor作者将写入 manifest 的author字段pluginRepositoryUrl仓库 URL将写入 manifest 的repository_urlpluginHomepageUrl主页 URL将写入 manifest 的homepage_urlpackageNamenpm 包名默认根据插件名自动推导可直接回车接受或修改包名自动推导逻辑在 generators/app/utils.js 的packageNameFromPluginName()中实现——先把*~.()!:[]等特殊字符替换为-再用slugify转小写修剪首尾多余的连字符最后统一加上joplin-plugin-前缀并限制在 214 个字符内。例如插件名 Test List Plugin 会得到默认包名joplin-plugin-test-list-plugin这与 note_list_renderer 的 package.json 中的实际包名完全吻合。注意npm 存在一个长期未修复的 bug会特殊对待.gitignore和package.json因此生成器模板目录中把它们命名为.gitignore_TEMPLATE、package_TEMPLATE.json在写入阶段再重命名还原源码中已有注释说明见 index.js。生成后的目录结构生成器会产出以下关键文件可在 note_list_renderer 示例 中看到实际效果your-plugin/ ├── src/ │ ├── index.ts # 插件源码入口 │ └── manifest.json # 插件清单 ├── api/ # 官方 Joplin Plugin API 类型声明.d.ts 等 ├── script/ # 发布脚本含 publish/ 子目录 ├── plugin.config.json # 构建配置extraScripts 等 ├── webpack.config.js # 构建配置 ├── tsconfig.json ├── package.json ├── README.md └── .gitignore其中最重要的两个文件是/src/index.ts插件源码入口。默认模板内容见 templates/src/index.ts为import joplin from api; joplin.plugins.register({ onStart: async function() { // eslint-disable-next-line no-console console.info(Hello world. Test plugin started!); }, });它从api导入joplin对象Webpack 配置中为api设置了指向本目录api/的路径别名并通过joplin.plugins.register()注册插件onStart是插件启动入口。/src/manifest.json插件清单包含名称、版本、作者等元信息。生成后的初始模板见 templates/src/manifest.json各字段含义字段说明manifest_version清单格式版本当前为1id全局唯一插件 ID对应提问的 pluginIdapp_min_version支持该插件所需的最低 Joplin 版本模板默认3.7version插件版本号初始1.0.0与 package.json 同步name/description/author显示名称、描述、作者homepage_url/repository_url主页与仓库地址keywords/categories/screenshots关键词、分类、截图用于插件仓库展示icons/promo_tile图标与推广图配置构建插件产出 dist 与 JPL 安装包构建命令npm run dist该命令由三条 Webpack 构建串联而成见 package_TEMPLATE.json 中的scripts.distwebpack --env joplin-plugin-configbuildMain webpack --env joplin-plugin-configbuildExtraScripts webpack --env joplin-plugin-configcreateArchive对应 webpack.config.js 中main()函数的三个构建阶段注释明确说明 Webpack 配置并行运行会有问题因此必须串行执行多次buildMain编译src/index.ts为dist/index.js同时用copy-webpack-plugin把src/下其余非 TS/TSX 文件CSS、图片、无需编译的 JS 等原样复制到dist/buildExtraScripts按plugin.config.json中的extraScripts逐个编译附加脚本若为空则该阶段直接退出见buildExtraScriptConfigs的空数组判断createArchive触发onBuildCompleted钩子把dist/打包为publish/pluginId.jpl归档并生成对应的pluginId.json插件信息文件。构建完成后产物为dist/编译后的可分发代码目录根目录实际为publish/目录.jpl归档文件Joplin Plugin 安装包与.json信息文件可直接用于分发或在 Joplin 中安装。打包细节见 webpack.config.js 的createPluginArchive与createPluginInfo.jpl实际是用tar以strictportable模式把dist/下所有文件打成压缩包.json则是 manifest 的副本并额外写入_publish_hashsha256:jpl 文件的 SHA-256 摘要与_publish_commit当前git分支与提交号非 git 仓库时留空两个字段。若dist/为空打包会直接抛错 Plugin archive was not created because the dist directory is empty。构建配置说明模板项目默认使用TypeScript但你可以改配置用纯 JavaScript把入口改成.js并调整 ts-loader 规则即可。构建链默认mode: production、target: nodeTS 由ts-loader编译。值得注意的是Webpack 5 默认不再为 Node 内置模块提供 polyfill而插件运行在 Electron 的 Node 环境中因此配置把所有builtinModules的fallback显式设为false既避免警告也无需 polyfill源码注释见 webpack.config.js。构建时还会对package.json做合法性校验validatePackageJson包名不以joplin-plugin-开头、keywords不含joplin-plugin、存在postinstall脚本建议改用prepare时都会打印黄色警告。更新插件版本号npm run updateVersion该命令执行webpack --env joplin-plugin-configupdateVersion核心实现在 webpack.config.js 的updateVersion()函数中解析当前版本号取最后一段patch 位加 1例如1.0.3 → 1.0.4同时更新package.json与manifest.json两个文件的版本号保证它们始终同步若更新后两处版本号不一致例如用户曾手动改过其中一个会打印警告提示手动对齐。更新插件框架npm run update该命令在模板 package.json 中的定义为npm install -g generator-joplin yo joplin --node-package-manager npm --update --force即重新安装最新的generator-joplin并以--update --force模式运行生成器把模板文件更新到最新版本。更新模式的合并策略更新不是无脑覆盖而是有精细的合并逻辑见 generators/app/index.js 与 utils.jssrc/与README.md完全不动noUpdateFiles列表src/index.ts、src/manifest.json、README.md在 update 模式下会被跳过package.json智能合并mergePackageKey()递归合并——目标已存在的键默认保留用户值keywords确保包含joplin-plugindevDependencies一律采用框架新版本否则依赖无法随框架升级scripts中的dist、prepare、update三个键强制采用框架版本若不对插件将无法正确构建.gitignore/.npmignore行级合并mergeIgnoreFile()把新旧文件按行拼接并去重保留空行plugin.config.json保留现有内容源码注释说明暂时保留现有内容未来可能再做合并webpack.config.js会被覆盖这是更新时唯一容易出问题的文件因此官方建议不要在它里面直接做大改动——可以新建一个独立 JS 文件再在webpack.config.js中require引入这样更新后只需恢复那一行引入语句即可。模板注释中也明确写着同样的建议见 webpack.config.js。另外进入 update 模式且未加--silent时生成器会先弹出一个确认对话框警告更新会覆盖配置文件、不会改动src/与 README并提醒先把改动纳入版本控制以便 diff 检查用户选择不继续则直接退出且不做任何更改。使用 extraScripts 编译外部脚本什么时候需要它默认情况下 Webpack 只编译src/index.ts以及它 import 的文件其余文件会被直接复制到插件包中。但以下两类外部脚本必须经过编译见 GENERATOR_DOC.md 原文档与本仓库模板TypeScript 脚本.ts必须编译为.js才能在运行时加载依赖了 package.json 中第三方模块的脚本无论 JS 还是 TS都必须编译使依赖被打包进 JPL 文件否则运行时无法解析模块。典型场景是内容脚本content scripts与Webview 脚本webview scripts。配置方法编辑plugin.config.json把脚本路径加入extraScripts数组{ extraScripts: [ webviews/index.ts ] }规则与行为结合 webpack.config.js 的resolveExtraScriptPath()与模板说明路径相对于/src例如文件在/src/webviews/index.ts就写webviews/index.ts路径指向的文件必须真实存在否则抛错Could not find extra script: ...编译产物始终使用.js扩展名webviews/index.ts会输出为webviews/index.js你在插件代码中引用的就是编译后的这个路径编译后的 JS 会覆盖上一阶段buildMain复制过去的同名.js文件——这正是设计意图不需要编译的 JS 被直接复制需要编译的则被替换为编译产物源码注释见 webpack.config.js。另外Webpack 配置把codemirror/*、lezer/*等一系列常用编辑器库声明为 externalextraScriptExternals这意味着内容脚本可以放心地require(codemirror/view)等库而不必担心被打包或冲突完整清单见 webpack.config.js。发布插件到官方插件仓库发布流程先通过npm publish把插件发布到 npmjs.com。之后会有一个自动脚本扫描 npm把满足条件的插件收录进 Joplin 官方插件仓库。必须满足的三个条件插件要进入官方仓库必须同时满足见 GENERATOR_DOC.mdpackage.json的name以joplin-plugin-开头例如joplin-plugin-tocpackage.json的keywords包含joplin-pluginpublish/目录中存在.jpl和.json两个文件——它们由npm run dist构建生成。一般情况下生成器会自动完成这些配置包名默认带joplin-plugin-前缀见上文packageNameFromPluginName逻辑、keywords初始就包含joplin-plugin见 package_TEMPLATE.json、publish/目录由npm run dist自动产出。但如果插件没有出现在仓库中请按上述三条逐一排查。补充仓库模板的package.json还提供了npm run submit脚本tsc --project script/publish/tsconfig.json node ./script/publish/dist/index.js配合 script/publish 目录下的发布流程脚本含authenticate、verifyBuild、verifyGitState、submitPayload等步骤使用用于向插件仓库提交插件信息。此外webpack.config.js 的validatePackageJson()在构建时就会预先警告这三类不合规情况是发布前自查的第一道关卡。生成器的两个特殊运行模式generators/app/index.js 定义了silent与update两个命令行选项理解它们有助于正确使用--update进入框架更新模式跳过交互式提问pluginId等属性置空按上文合并策略更新配置文件跳过src/与README.md--silent与--update配合时跳过更新前的确认对话框适合脚本化/无人值守更新如模板中npm run update所执行的yo joplin ... --update --force就是如此。更进一步在仓库中验证与学习查看生成器全部模板文件packages/generator-joplin/generators/app/templates其中 GENERATOR_DOC.md 即为本文原始依据阅读生成器核心源码generators/app/index.js交互提问、文件写入与更新合并与 generators/app/utils.js包名推导、package.json / ignore 文件合并研究构建链细节templates/webpack.config.js 完整展示了 buildMain / buildExtraScripts / createArchive 三阶段与版本更新逻辑参考真实产物packages/app-cli/tests/support/plugins/note_list_renderer 是仓库内置的由生成器产出的示例插件包含api/类型声明、src/、plugin.config.json、webpack.config.js与package.json可对照其 manifest.json 与 package.json 理解清单字段与脚本的实际形态了解插件 API 全貌api 目录下的Joplin.d.ts、JoplinViews*.d.ts、JoplinContentScripts.d.ts等类型声明文件是开发插件时最权威的 API 参考。总结generator-joplin把 Joplin 插件开发从零散手工搭建收敛为一条命令起步安装 Yeoman 与生成器后交互式回答几个问题即可获得包含 TypeScript 入口、manifest、Webpack 构建链与官方 API 类型声明的完整工程npm run dist一键产出dist/与publish/下的 JPL 安装包npm run updateVersion保证双版本号同步npm run update在保留src/与 README 的前提下智能升级框架extraScripts让内容脚本与 Webview 脚本也能被正确编译而npm publish加上三条发布规范的自动预配置让插件可以顺利进入 Joplin 官方插件仓库。掌握这套工具链你就具备了从零开发、构建、升级到发布 Joplin 插件的完整能力。【免费下载链接】joplinJoplin - the privacy-focused note taking app with sync capabilities for Windows, macOS, Linux, Android and iOS.项目地址: https://gitcode.com/GitHub_Trending/jo/joplin创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考