rt-link-loaderを開発しました。これは、webpackのヘルパー関数です。コンパイル時に構文解析をしないCssのローダが必要でした。 サーバサイドでCSSを処理することを予定していたので、コンパイル時に、用意しているcssは、CSSの文法的に有効ではないのでした。webpackのローダーをいくつか試してみましたが、要求を満たすものを見つけることができませんでした。そこで、ローダーを書くことにしたのです。Webpackのコンパイル処理をよりよく理解 することもできるとの思惑もありました。
当初は、CSSの文法チェックを回避するものがあれば良かったのですが、javascriptでCSSStyleSheetオブジェクトを取得できるものにしたいと思うようになりました。この処理を書く時間はかかりませんでした。その後、テストコードを書きます。あるWebpackのローダープロジェクトを参考にしていました。それに従い、jestをテストライブラリとして使うことにしました。jestの使用は初めてでした。jestが、project配下のファイルをスキャンして、パターンにマッチしたファイルをjestのテストコードとして認識することは、理解できました。ここまでは、それほど時間がかかることはありませんでした。テスト用のwebpackの構成を用意するのは、6時間くらいの時間を費やしました。jestはjsdomとmemfsというモジュールを使用します。共にテストにとって協力なモジュールとなると思います。さらにソースコードとドキュメントを読むことになりました。memfsは、仮想ファイルシステムをメモリ上に作ります。物理ストレージ上にファイルを用意する必要がありません。この点は良い点です。全ての設定をjavascriptの文字列として準備するところは、良い点かどうかは一考の余地ありといったところでしょう。テストコードは、オペレーティングシステムから独立する点は良いですが、デベロッパーによっては、理解しがたい箇所もでてくるかもしれません。
memfs、nodejsのコードとドキュメントを読んで、ついに”rt-link-loader”のテストコードを完成させることができました。テストをしてみて、jsdomがCSSStyleSheetのhrefプロパティーを初期化していないことに気がつきました。私がこのローダーを使ってコンパイルした場合の本番環境では、ブラウザがCSSStyleSheetのhrefを設定してくれると思います。CSSStyleSheetのhrefをテストコード内で設定するように回避しました。この回避がテストとして正しいのかわからないところではありますが… 何はともあれ、”rt-link-loader”を作ることはできました。
この開発をとおして、次の技術を理解することができたと思います。
このプロジェクトはgithub上で確認することができます。
rt-link-loaderはnpmから入手できます。