フロントエンドエンジニアの岡田です。 LCLのフロントエンドでは、npm scriptsを使っていますが、たまに特定の環境だけ動かないことがあります。
今回は、ケース別に確認すると良いこと・試すと良いことをご紹介します。
ケース別の確認事項等
自分のローカル環境では動くが、他の人の環境では動かない場合
新しいパッケージを導入する際に、自分のローカル環境では動くのに、他の人の環境では動かないというケースがあると思います。これが一番多いのではないでしょうか。 その場合は以下を確認すると良いです。
自分のローカル環境では動かないが、他の人のローカル環境やテストサーバーでは動く場合
前述のケースとは反対のケースです。この場合は以下を確認します。
Macでは動くが、Windowsでは動かない場合
npm scriptsは、OSによってコマンドが異なるようです。LCLではエンジニアは全員Macなのでこのケースはありませんでしたが、例えばMacの
cp, rm -rf, mkdir -p
などは、Windowsでは別のコマンドになるようなので調べてみると良いと思います。
ローカル環境では動くが、テストサーバーやステージングサーバーでは動かない場合
この場合も、環境の違いを中心に確認してみます。
確認すること・試すこと一覧
ログにエラーが出ていないか
動かない環境のログを確認します。ログを見るのに慣れていなかったり、ログが長過ぎて追うのが大変な場合は、「error」という文字列で検索をすると見つけやすいです。
追加したパッケージがpackage.jsonに記載されているか
パッケージのインストール時に--save や --save-devを忘れると、package.jsonに書き込まれません。
またはコミットを忘れてしまうこともあるかもしれません。
念のため、package.jsonを確認すると良いです。
本番で必要なパッケージがdevDependenciesに書かれていないか
package.jsonには書き込まれていても、本番環境で必要なパッケージがdevDependenciesに設定されてしまっている場合があります。devDependenciesに設定されていても、ローカル環境では動くため、自分では気づきにくいかもしれません。
LCLでは、ローカル環境ではdevDependenciesとdependenciesの両方がインストールされますが、テストサーバー以降（ステージング・本番）はdependenciesしかインストールされない設定にしています。開発時にしか使わないツール（lint系など）は、なるべく本番環境にはインストールしたくないためです。
そのため、特にテストサーバーで動かない場合は「本番で必要なパッケージがdevDependenciesに書かれていないか」をチェックします。
nodeとnpmのバージョンが同じかどうか
nodeとnpmのバージョンが違うと、エラーになることがあります。各環境で、同じバージョンになっているかどうかを確認すると良いです。
それぞれのバージョンは以下のコマンドで確認できます。
node -v npm -v
ちなみに私のローカル環境では、npmのバージョンは、nodeと連動して変わっていました。 nodeはnodebrewで管理しているので、いい感じにしてくれているのかもしれません。
$ node -v v6.9.1 $ npm -v 3.10.8 $ nodebrew use v8.11.3 use v8.11.3 $ node -v v8.11.3 $ npm -v 5.6.0 ←自動的にバージョンが上がっている
実際にインストールされているパッケージが同じかどうか
ローカル環境の対象のプロジェクトにはインストールされていなくても、グローバルにインストールされていると動いてしまうこともあると思います。 動いている環境と動かない環境で、それぞれパッケージを比較してみると良いと思います。
インストールされているパッケージは、以下のコマンドで確認できます。
npm list --depth=0 ※対象のディレクトリで実行 npm list --depth=0 -g ※グローバル
空のディレクトリはコミットされているか
空のディレクトリのままでコミットをして、他のメンバーに環境を共有する場合もあると思います。 gitでは、そのままでは空のディレクトリがコミットできません。（.gitkeepを使えば可能です） 空のディレクトリのコミットを忘れていても、自分の環境では問題なく動くため、原因究明に時間がかかることがあります。
空のディレクトリを作った場合は、.gitkeepを作る習慣をつけたほうが良さそうです。
gitkeepについては以下の記事を参考にさせていただきました。
空のディレクトリを維持するための、 .gitkeep と .gitignore の使い分け - Qiita
ディレクトリ名・ファイル名の大文字・小文字を間違えていないか
WindowsやMacOSでは、標準では大文字小文字の区別をしない設定になっているようです。そのため、大文字・小文字を間違えていても、ローカルでは参照できます。 しかし、UNIXでは大文字・小文字を区別するため、テストサーバーに上げると動かなくなってしまうことがあります。
なお、WindowsやMacOSでも区別する設定にできるようですが、特にMacではディスクのフォーマット形式を変えなければならないため、途中から変更するのは難しそうです。
node_modulesディレクトリの削除
いろいろ確認しても原因がわからない時に、試してみると良いです。
/node_modules/ ディレクトリを削除（もしくは別の場所に移動）して、npm installで再インストールします。
開発環境では、色々なパッケージをインストール＆アンインストールするためゴミが残ってしまうのか、おかしくなってしまうことがあるようです。（一度ありました）
まとめ
基本的にはログのエラーを確認するのが正攻法ではあるのですが、ログの内容を信じて検索しても、なかなか答えが見つからなかったりすることがあると思います。そんな際にお役に立てば幸いです。
