[web]npm関連でハマったことpart2

現在進行形で、
LiSAの「Rizing Hope」を聴きながら、
あげぽよで書いてます。
あ、アニソンですw

どうもこんばんは。

今回は、前回
[web]cssのsassをコンパイルしようとしてエラーが出てハマった話でもちらっと書いたんですが、
これの再来というか
なんかちょっとしたことをやろうとしてハマった話を書いていきます。

npm uninstallすればなんとかなるという果てしない愚行の果てに…

本気でなんとかなったと思っていたのが私です。

前回、解決方法は、とりあえずuninstallすりゃいいでしょ
→その後installでFA
というような感じで案内しましたが、
それはどうやら違ったようです。
まさに愚行

ということで、長き戦いの末に行き着いた結論は
よーわからん
ということだったのです。

色々なことを試したのですが、
どれもイマイチ効果がなく、
唯一これかなーと思ったのは
私のいじっていた環境には
bowerもinstallされていました。
それをuninstallして、その後、installしなおしたらできたのですが
なんでなのか。

ちょっと考察を書いていこうと思います。

考察

まずはじめに、
前回にも色々なことをしましたが、
それによる副作用が出ていました。

色々なものをuninstallしたり、updateしたり、
installしてみたりともはやカオス状態になっていましたが、
とりあえず動いていたので放っておきました。(ダメすぎ

すると、
開発者Eさん
「これコンフリクトしてるんですけどー」

「またまたそんなバカなー」

!?
コンフリクトの内容は、
sassでmixin関数を使用している箇所が
適用されていないというものでした。

なんでだろーって思ったのがハマったきっかけ。

まずは開発者Eさんのpackage.jsonと、Gruntfileの内容を
コピペしていただきました。
diffしてみたけど、違うところは全くない。

相談してみると、
「私はgruntしてるの仮想環境だからかなー多分関係ないと思いますけどね。」

ということで悩みながら、開発者Yさんにも協力を仰ぎ、
なんとか、仮想環境でgruntを行える環境を作成しました。

早速実行してみると、どうやらこっちでは正しいcss生成ができている模様。

何が違うのかさっぱりわからん・・・

半ば諦めつつも、
とりあえず、一旦今のローカルの環境をちゃんと作り直してみようかなーと思い、
まず最初に実行したのが、
nodeとnodeのバージョンチェック

$ npm --version
$ node --version

まずこの時点でnodeのバージョンが違ってました。
なので修正。
私の環境下では前のバージョンの方で作成していたので、
それを適用。

そのあとはなにやったっけなー。
とりあえずnode_moduleを一回全部消したかったので、
削除してみました。
※ おそらく良い方法かもしれないので、自己責任でお願いします・・・
まっさらになった時点で、
今あるpackage.jsonを元に、
再度以下のコマンドを実行

npm install

これを実行することで、package.jsonに記述されている
内容のnode_moduleがディレクトリに入ってきてくれます。

その後、ここで初めて気づいたのですが、
なにやらbower.jsonなるものがありました。

npm install bower

これも実行。
しかしここにはcssのフレームワークの記述しかなかったですね。
でもこれも一つの原因っぽかったのかな?と今思いました。

環境を整えて、再度gruntを実行したところ、
正常なcssが作成されるようになりました。

まとめ

結果的に、
例えば勉強とかでコマンド間違えて、
グローバルにnodeとかnpmモジュールとかをインストールして
どれでどのバージョンを使っているかわからなくなってしまったのかなってのが
原因なのかなーって思いました。

自分で勉強とかするときはちゃんとそのディレクトリに
影響範囲を抑えないといけないなって話でした・・・

npmのことばっかりじゃなく、
なんか他にも書きたいですね・・・w

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です