scrapbox-bundlerの大幅アップデート紹介
from 2024/07/31
気づいている人もいるかもですが、1ヶ月前くらいからscrapbox-bundlerに大幅な機能追加・UI変更を加えていますtakker.icon
まとまった形で紹介できる形になったので、アップデート内容を告知します
大偉業.icontada.iconcak.iconbsahd.icon
changes
TODO: 対応するPRへのリンクを乗せる
(BREAKING) runを廃止、常に即座にbuildを走らせる
https://github.com/takker99/scrapbox-bundler/pull/13
UIはつけないで確定かbsahd.icon
ですtakker.icon
runしないときに表示するUIが無用の長物だったため、消しました
build終了後に、buildしたコードを各種操作ボタンを表示する
https://github.com/takker99/scrapbox-bundler/pull/16
https://gyazo.com/dfbea44c1ebb5b2188b331a45a020fb1
よさそう.icon!cak.icon
dark theme対応
複数のコードを同時にbuildする
https://github.com/takker99/scrapbox-bundler/pull/19
例
https://gyazo.com/836756ca538be56c66cda6ba1eb095c9
複数のコードを一つのscrapbox pageに埋め込んだscrapbox json dataを作る
これにより、複数のprojectで使うUserScriptとUserCSSを埋め込んだページを、1回のbuildで作成してimportできる
今までは、UserScriptやUserCSSを一つづつJSONにして、一つづつimportしなければならなかった
コード生成一回、import作業1回で全てのUserScript/UserCSSを更新できるようになったtakker.icon*2
UI codeとworker codeの2つが必要なUserScriptを導入しやすくなったのも嬉しい
2つのコードを埋め込んだページを一発で作れる
使い方
templateにページのテンプレートへのURLを入れる
テキストファイルで書く
@と@でurlに渡したURLを入れると、それらがbuildしたコードで置き換わる
注意
最初の@の前は空白のみ挿入可
最後の@の後ろは行末でなければならない
%252Fや%2Fは/として書き入れること
おそらくdecodeURIComponent()の仕様
以前使っていた@CODE@も引き続き使える
urlに渡した最初のコードで置換される
大変ほしかった待望の機能パート1takker.icon
externalに正規表現っぽい構文を入れられる
external=https://i.gyazo.com/*など
構文は https://esbuild.github.io/api/#external を参照
井戸端のsettingsをbuildする時に便利かも
再読込したいURLだけreloadする
https://github.com/takker99/scrapbox-bundler/pull/25
reloadにURLPatternで使えるURLの正規表現をいれる
構文は https://developer.mozilla.org/en-US/docs/Web/API/URL_Pattern_API#pattern_syntax を参照
path-to-regexpとほぼ同じ
例えばreload=*://scrapbox.io/*とすれば、scrapbox.io以外のコードはキャッシュから読み込みようにできる
URL先のリソースが更新されうるもののみ再読み込みし、それ以外はなるべくキャッシュから読み込むようにすることで、serverの負荷を減らしbuild時間を短縮できる
大変ほしかった待望の機能パート2takker.icon
bundle解析用metafileを出力
https://github.com/takker99/scrapbox-bundler/pull/20
Esbuild Bundle Size Analyzerで、bundled code中の元のmoduleの割合をtree mapやpie chartで閲覧できる
https://gyazo.com/d2b180494a85bd1840256f9ae27e9c36
https://gyazo.com/6078a6a0d5a0b585b2154c2ee1bcf3de
(脱線)このアプリ、ライブラリーを一切使わずに書いててすごいtakker.icon
jsr:とnpm:importサポート
https://github.com/takker99/scrapbox-bundler/pull/22
https://github.com/takker99/ScrapJupyter/pull/54
jsr:はjsr.ioのURLに変換する
npm:はesm.shに変換する
どちらもsemverをサポート
完全ではないが、なるべく同じver.にあわせるよう依存解決する
takker.iconのコードをJSRにpublishするうえで必要だった
(BREAKING) outputを廃止
https://github.com/takker99/scrapbox-bundler/pull/19
上述したボタンを代わりに使う
sourcemap強化
https://github.com/takker99/ScrapJupyter/pull/53
bundleするコードのsourcemapを読み込む (Multi-level SourceMap)
雑談
これに合わせて名前をcosense-bundlerに変更してみてはbsahd.icon
domain nameが変わっちゃうので保留takker.icon
普通にesbuild-webでいい気がするけどbsahd.icon
scrapboxに最適化したoption(template)なども含んでいるので、あまり一般名にはしたくないtakker.icon