package.jsonの各種要素を読み込みたい！

ラーメン 今日食べたものです。package.jsonに書かれたデータが欲しいことが往々にして存在します。たとえばversionです。普段からnpm versionコマンドを利用するように意識していると、やはりどうしてもアプリケーション内でpackage.json内のversionを読み込んで表示したり、console.errorを繰り出す際にversionも併記してSentryなどのエラー監視ツールなどの補助情報として利用し、問題の絞り込みをしてみたくなるものです。

Node.js

process.env.npm_package_versionを呼び出せばよい。かんたん

Web Application

ひとくちにWeb Applicationといってもなんか世界が広すぎて解説しきれないので2つの手法を提示する。

• package.jsonを読み込む

ES6であれば次のように読み込める。

import packageJson from "../package.json"
console.log(packageJson.version)

ただし、src以下のディレクトリしか読み込みのみを許可されている場合はpackage.jsonを直接読み込むことができない。対処法としてはsymbolic linkを貼ってやればよい。

ln -s package.json src/package.alias.json

これで次のように読み込める。

import packageJson from "./package.alias.json"
console.log(packageJson.version)

• create-react-appの場合

そもそもpackage.jsonを読み込んでしまうのは中々穏やかではない（気がする）。create-react-appは最初から色々揃っており、.envに次のように記載すればよい。

REACT_APP_VERSION=$npm_package_version

するとprocess.env.REACT_APP_VERSIONとして読み込みが可能である。

おっと、これはWindowsでは動きませんよ!
このコードをwindowsでビルドしてしまうと、process.env.REACT_APP_VERSIONはバージョン情報を出さず、$npm_package_versionと表示してしまいます。困りましたね。

Windowsでのnpmの環境変数の読み込みは次の形式となります。

REACT_APP_VERSION=%npm_package_version%

しかしこれではmacOS, Linuxでうまく読み込めません。

解決方法は、上記の.envのやり方を諦めてpackage.alias.jsonを読み込むか、泥臭い方法で頑張るかです。

REACT_APP_VERSION_UNIX=$npm_package_version
REACT_APP_VERSION_WIN=%npm_package_version%

export const appVersion = process.env.REACT_APP_VERSION_WIN === "%npm_package_version%" 
    ? process.env.REACT_APP_VERSION_UNIX 
    : process.env.REACT_APP_VERSION_WIN

泥臭いですがこれでWindows, macOS, Linuxどれでもversion情報を読み込むことができました。こんなことするぐらいならpackage.jsonをimportした方が良い気もしますが。

他にもnpmの環境変数が欲しい？

process.envには様々な情報が含まれています。パッケージ名を含むnpm_package_name、ライセンス情報を含むnpm_package_license等。各自見てください。全部紹介する気にはなりません。とはいえWeb開発にはpackage.jsonの中身さえ読めれば十分とは思います。