DEV Community

Origami
Origami

Posted on

3 2

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の中身さえ読めれば十分とは思います。

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

Top comments (0)

Image of DataStax

AI Agents Made Easy with Langflow

Connect models, vector stores, memory and other AI building blocks with the click of a button to build and deploy AI-powered agents.

Get started for free

👋 Kindness is contagious

Explore a trove of insights in this engaging article, celebrated within our welcoming DEV Community. Developers from every background are invited to join and enhance our shared wisdom.

A genuine "thank you" can truly uplift someone’s day. Feel free to express your gratitude in the comments below!

On DEV, our collective exchange of knowledge lightens the road ahead and strengthens our community bonds. Found something valuable here? A small thank you to the author can make a big difference.

Okay