🦕

Deno 2でObsidian Pluginを書く

2024/10/17に公開

 宣伝Obsidianのノートのトップにリレーショングラフを埋め込むプラグインを開発しています

めちゃ便利なので使ってくれ！！！
https://github.com/ras0q/obsidian-graph-banner

 本編自作のObsidianプラグインをNode.js with pnpmから最近リリースされたDeno 2に移行した
Obsidianに読み込ませる際は以前と同様esbuildでCommonJSにバンドルする

Node.jsとの互換性が高くnpmも使えるので基本動く
https://github.com/ras0q/obsidian-graph-banner/pull/99
https://github.com/ras0q/obsidian-graph-banner/pull/99
利点としては
ビルトインTypeScriptサポート
tsconfig.jsonがいらなくなる
eslint, preitter, biomeがいらなくなる (deno fmt, deno lint, deno check)
package.jsonを消してdeno.jsoncに以下を記述したら大体動く

imports（package.jsonのdependencies）はプラグインに合わせて調整する
deno.jsonc
{
	"compilerOptions": {
		"lib": [
			"deno.window",
			"dom"
		]
	},
	"exclude": [
		"node_modules",
		"main.js"
	],
	"imports": {
		"esbuild": "npm:esbuild@0.24.0",
		"ignore": "npm:ignore@6.0.2", // プラグイン固有の依存パッケージ
		"obsidian": "npm:obsidian@1.7.2"
	},
	"nodeModulesDir": "auto", // esbuildがignoreを認識するためにnode_modulesを作成する必要がある
	"tasks": {
		"build": "esbuild ./src/main.ts --bundle --external:obsidian --format=cjs --minify --target=es6 --outfile=./main.js",
		"dev": "esbuild ./src/main.ts --watch --bundle --external:obsidian --format=cjs --target=es6 --sourcemap=inline --outfile=./main.js"
	}
}

compilerOptions.libがデフォルト（["deno.window"]）だとHTMLElement.parentなどの定義が足らず型エラーが出るので"dom"を追加

nodeModulesDirをauto（デフォルトはnone）に
ESBuildは元々ファイルに書いてnodeで実行していたが、tasksに直接書いた（好み）
!追記
JSRのパッケージはnode_modulesには追加されないため、別途esbuildのプラグインを使ってmain.jsにバンドルする必要があるらしいです

esbuildプラグインはCLIで実行できないためtsファイルにesbuildの設定を書いて実行してください
https://github.com/lucacasonato/esbuild_deno_loader
GitHub Actionsのworkflowsをdenoland/setup-denoなどを使って修正する

deno installで明示的にnode_modules内にパッケージをインストールしないとdeno task buildでesbuild: command not foundをくらってしまうので注意
設定ファイルが減って最高～～

宣伝

本編

Discussion