package.jsonのパッケージで気をつけておきたいバージョン記法のキャレット(^)とチルダ(~)的なお話

reactとかもちろんpackage.jsonでパッケージの管理をしているわけで。
そこで気をつけないといけないのがdependenciesとかdevDependenciesとか色々とあるわけだけども。
実は一番気をつけないといけないのがバージョンの指定方法。

現在babelの6とか7が入り乱れてる戦国時代的なことになっていて、webpackもだしparcelもだし色んなところでその煽りを食らっていたり。
特にparcelでその煽りを食らってしまい、なおかつこのバージョン指定方法でミスっていたために問題が発生してしまった的な。
ということで今日はバージョン記法についてのお話をば。

{
  "dependencies": {
    "node-sass": "^4.9.2",
    "parcel-bundler": "1.9.7",
    "react": "~16.4.2",
  },
}

ちょっと一部だけ切り出しておいた。
ちなみにdependencies(npm install --save package_name)とかdevDependencies(npm install --save-dev eslint)とかの違いは今回は割愛。

で、今回問題となるのはパッケージ名のvalueの先頭に^とか~がついてたり何もついてなかったりとか。
それぞれの用途は下記になる。

■^(キャレット)

npm installした際に一番左側のバージョンは変更しない。
上に書いてあるnode-sassがこの記法なんだけど、npm installしたときに自動的に4.9.3とか4.10.0とかそういった感じにアップしてnode_modulesの中に格納する的な。
だからメジャーじゃないけどバージョンアップされたやつを自動的にアップデートしてくれる的な。

■~(チルダ)

npm installした際に一番右側のバージョンを変更してくれる。
上に書いてあるreactがこの記法なんだけど、npm installしたときに自動的に16.4.3とか16.4.4とかそういった感じでnode_modulesに格納する的な。
ちなみにパッケージによってはバージョンを1.0とか二桁みたいな感じにしてることがあるけど、それは1.1とか1.2みたいに右側がアップデートされる感じ。
パッチというかバグ修正というかそういう意味合いのバージョンを自動的にアップデートしてくれる的な。

■何もついていない

これは単純にそのバージョンで固定ですよ的な。

通常npm installするとpackage.jsonって実はチルダ記法で入る感じになっていて、npm installするたびにメジャーじゃないけどでもアップデートだよっていう内容を自動的に取り込んでくれるんだけど、今回問題となったのはparcel-bundlerで。
2018/10/10現在で最新のparcel-bundlerは1.10.2で自分が使っていたのは1.9.7なんだけど、1.10.2からbabel7の関係から、内部的に@babel/coreを使うのかbabel-coreを使うのかとかっていう仕組みが導入されていたわけで。
で、その結果なぜかreduxのreducer部分でCannot read property 'key' of undefinedとかいうエラーが出てたっていう。
多分babel7的な処理になっちゃってるのかなんなのかよくわからないんだけどこれに2時間ぐらい手こずってしまったっていう。
普通だったらメジャーバージョンアップで何かこういうことがあるとかはあるんだけど、まさかこの段階で来るとは的なみたいな。

特にフロントエンドはなかなか技術の変遷がすごいわけで。
さらにアップデートがガンガンかかって来るけど中途半端なアップデートだとメジャーアップデートにならなかったりとかあるわけで。
通常はpackage-lock.jsonとかあるから多分circle ciとかでは大丈夫なんだろうけど、ローカルで開発してるときにこうなったから念のためバージョン記法は見直しておいた方がいいんじゃないか的なみたいな。