【メモ】npmからyarnに乗り換え【#np2020】

yarn_logo.png 少しずつ開発している新サイト(プロジェクト名:np2020)では、環境の設計以来ずっとnpmを使っていたんですけど、業務でこれまた新しく設計された環境(設計したのは前任者)で開発をしていて、そこでyarnを使っていてインストールがとても速くて使いやすいので、こっちでもそれに乗り換えましょうということで乗り換え。 npmとyarnの違いについてはこの辺がわかりやすいです。 Yarnとnpmの違い:JavaScriptパッケージマネジャーを比較する – WPJ npm vs yarnどっち使うかの話 – Qiita 手順は以下の通り。

  1. npmでyarnをインストール
  2. yarnコマンドを実行
以上です。それだけ。

続きを読む

【メモ】Vagrant では npm run watch が動作しない【#np2020】

Laravelで静的ファイルを更新した場合、Laravel-mixを使ってコンパイルするわけですが、今の僕のサイズで1回あたり40秒ぐらい掛かるので、頻繁にコードを書き換える必要があるときには結構煩雑。出来ればこうもっとパパッとやって欲しい、バックグラウンドでやっておいて欲しい。

続きを読む

「npm run production」でエラー(メモリ不足)が出てコンパイル出来ない【#np2020】

npmのサムネイル画像 今現在のフロントエンドはBootstrapVueで、Laravel Mixを使って

npm run dev
コマンドで開発用コンパイルをして動作チェック、問題なければmasterブランチにマージしてデプロイというかたちになっています。「npm run dev」コマンドは複数のファイルを1つにまとめてくれるんですが、minifyはしません。一方で本番用コンパイルである
npm run production
の方は、まとめた上でminifyしてくれます。どれくらい小さくなるかは環境によると思いますが、僕の環境ではおおむね1/4程度にはなるようです。jsファイルやcssファイルは参照される頻度も高いので、これが小さくなるのはとてもデカい。というわけで、デプロイ前にはそれをしたかったんですが……これまでエラーが出て上手く行かなかったんですね。それがようやく解決出来ましたというお話。

続きを読む

【メモ】npm「package-lock.json」がコンフリクトしたら

npm ローカル環境で環境に変更を加えてpushしようと思ったら「package-lock.json」がコンフリクト。どうやら別のローカル環境で行った変更をマージするのを忘れていたみたい。これは面倒なことになった……と思ったのだけど、どうやら普通に

$ npm install
とするだけで勝手に直してくれるらしい。マジか。

やってみた

npm WARN conflict A git conflict was detected in package-lock.json. Attempting to auto-resolve.
npm WARN conflict To make this happen automatically on git rebase/merge, consider using the npm-merge-driver:
npm WARN conflict $ npx npm-merge-driver install -g
などなどと表示され、
updated 1 package and audited 16936 packages in 22.821s
found 0 vulnerabilities
問題なく終了! そのままマージコミットして事なきを得ましたとさ。 慌てて手作業で直し始めなくて良かった。素晴らしすぎ。 これに限らず今さらながら様々な自動化の恩恵を受けている気がします。モダンな開発環境、ステキ。 あと、
Attempting to auto-resolve.
っていう言い回しが控えめでとても好き。

参考

npm installでコンフリクトしたpackage-lock.jsonを自動でresolveしてくた – nwtgck / Ryo Ota package-lock.jsonについて知りたくても聞けなかったこと – Qiita

続きを読む