はじめに
ブックマークレットを2回クリックするのを1回のクリックにしようと思って、2つのブックマークレットのファイルを1つのファイルにしました。そうしたら「保守性が下がった」と思いました。なぜなら異なる機能で別々のファイルに分かれていた関数が1つのファイルに入ったからです。その対策としてwebpackでバンドルすることで別々のファイルから1つのブックマークレットを作る方法を調べて作ってみました。
本記事の対象者
- webpackを使って複数ファイルをバンドルして1つのブックマークレットを作る方法を知りたい方。
- ブックマークレットの規模が大きくなった方。
調べたURL
webpackの公式ウェブサイトを読みました。次のURLが役に立ちました。
| タイトル | URL |
|---|---|
| Concepts | https://webpack.js.org/concepts/ |
| Getting Started | https://webpack.js.org/guides/getting-started/ |
| Writing a Plugin | https://webpack.js.org/contribute/writing-a-plugin/ |
| Plugin API | https://webpack.js.org/api/plugins/ |
| Node Interface | https://webpack.js.org/api/node/ |
どうやって作るか
webpackの出力ファイルはブックマークレットに必要な「javascript:」のラベルが先頭に付いていません。これを付ける必要があります。
調べたところ、ラベルを付けるには2つの方法がありそうです。
1つめの方法はプラグインのhookを使うことです。Plugin APIのページにある約135個のhookのなかでassetEmittedのhookを選びました。このhookはファイル名やファイルの中身が得られます。
次のプログラムはPlugin APIのページ（Compiler Hooks）にあるサンプルプログラムです。
compiler.hooks.assetEmitted.tap(
'MyPlugin',
(file, { content, source, outputPath, compilation, targetPath }) => {
console.log(content); // <Buffer 66 6f 6f 62 61 72>
}
);
webpackがファイル出力したタイミングで先頭に「javascript:」のラベルをつけてファイルを上書きします。
2つめの方法はノードインタフェースを使うことです。
次のプログラムはNode Interfaceのページにあるサンプルプログラムです。
const webpack = require('webpack');
const compiler = webpack({
// ...
});
compiler.run((err, stats) => {
// ...
compiler.close((closeErr) => {
// ...
});
});
このNode.jsのサンプルプログラムはwebpackを実行します。webpackを実行した後で出力されたファイルの先頭に「javascript:」のラベルつけてファイルを上書きします。
GitHubで公開
調べて作った参照用のプログラムを次のURLで読めます。
さいごに
webpackのプラグインを使う方法とノードインタフェースを使う方法の2つの方法で作ってみました。
npx webpack watch のコマンドを使えばファイルの変更を常に監視して出力ファイルに反映できるので、プラグインのhookを使う方法の方がおすすめです。