package.jsonからversionを抜き出してjsファイルに埋め込む

package.jsonからversionを抜き出してjsファイルに埋め込む方法です。

ブラウザで実行されるjsにバージョン情報が埋め込まれていると、

• dev/qa環境などで画面にこっそりバージョン情報を出しておくと、エラー報告がしやすい
• GoogleAnalyticsなどのユーザートラッキングログにバージョン情報を含めることで、バージョンアップ前後の結果がわかりやすい
• Sentryなどでエラー収集するときに、どのバージョンでバグが出たのかわかりやすい

などのメリットがあります。

手動でバージョン情報を埋め込むのは面倒なので、package.jsonから読み込む方法を考えます。package.jsonなら、npm versionコマンドで簡単に更新できるので、デプロイの前にバージョンアップを自動化するのも楽です。

そうしてpackage.jsonをjsから(WebPackを使って)読み込もうとするのですが、つい書いてしまう次のようなコードはあまり良くありません。

const version = reuire('./package.json').version;

const Hoge = props => (
  <div>{version}</div>
);

上記の例では、package.jsonの中身がすべてbundleされて、ブラウザから見られるようになってしまうため、不要な情報を公開してしまったりとリスクがあります。

というわけで、この問題を解決するようなWebPack Loaderを作ってみました。

json-extract-loader

jsonファイルから必要な情報だけ抜き取り、bundleファイルに含めることができます。

import { version, url } from '../package.json?version&repository.url'
// version => 0.1.0 
// url => https://github.com/KeitaMoromizato/json-exract-loader.git 

使いドコロによっては便利だと思うのですが、Universalじゃなくなってしまうのが難点...。他にいい解決方法が無いものか。