🐮

yarnからpnpmに移行した時の話

2023/01/16に公開

JavaScript

yarnはおわるのか

今までさんざんお世話になったyarnさんですが、だんだんおいていかれているらしい？ので、今自分が設計してて制作中のサービスを「pnpm」におきかえる実験をしました。
こうしたことはだいたい一筋縄でいかないことが多く、朝からいろいろ調査をしてなんとか立ち上げにこぎつけた感があるので、備忘録兼報告書として書き記しておきます。

yarnにするか、npmにするか、pnpmにするか？

気持ち的にはビアンカにするかフローラにするか論争に、デボラが加わってメッチャ強い感じ…ｗ
（最初見た時、ampmの仲間かなんかかと思ったけど、performant npmっていうやつなんだって。なんだ、結果npmか…）

環境

Mac M1 Venture13.1
react 18.2.0
next 13.0.7
node v16.19.0
Homebrew 3.6.18
yarn 1.22.19
npm 8.19.3
あとなにがいる？

参考リンク

こちら公式です
https://pnpm.io/ja/
yarnからpnpmに移行する方法

yarnからpnpmに移行する方法②

pnpmってなに

手順

install

インストールするよって言って、いろいろな手法が書いてあるんですよ、
で、Macのときはこうするのかぁ、とか思って

$ curl -fsSL https://get.pnpm.io/install.sh | sh -

ってやるじゃないですか、これでもできる環境もあると思うんですよ、

わたしはできんかった。泣

ちーん。
結局Homebrewに依存してました。すげえ下の方に書いてあった。

$ brew install pnpm

参考

node_modules削除

これ、今までは「ゴミ箱に捨てる」っていうすごい古典的な削除の仕方をしてました。
なんか、ステキな削除ツールがあるみたい。

$ npx npkill

killはただただかわいそう。

おいといて、何が起こるかと言うと、node_modulesが消えます。

こんなんが出て消えてくれる。このアメリカナイズな感じの表示が嫌いではない

package.jsonにscript追加

package.json

  "scripts": {
+   "preinstall": "npx only-allow pnpm",
    "dev": "next -p 3334",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },

これ入れとくと、他の開発者がpnpm依存関係以外のものを誤ってインストールするのを防げるらしい。
今はまだ、その真価を発揮できてない。(あとでわかる)

pnpm-workspace.yaml作成…？

これ、こちらのサイトの「STEP4」に「作成」とあるのですが、作ってない状態で「pnpm import」しちゃっても、勝手に作ってくれます。

本当に良かったかはわからない。ｗ

実行

$ pnpm import

ここまで来たら実行します。

yarn.lockを消して、依存関係install

yarn.lockをゴミ箱に捨てて、

$ pnpm i

これすると、node_modulesにいろいろ帰ってきます。おかえりー。

起動

起動します。

$ pnpm dev

これで無事起動するはず。

ちょっとおもうこと

① yarnが生きている

なんか、pnpm devでも起動するけど、yarn devでも問題なく起動するまま。これはいいのか。
ミスってyarnとか入力しちゃったらどうすんの。

やってみた

ミスったふりしてyarnって打ってみた。

package.json

  "scripts": {
+   "preinstall": "npx only-allow pnpm",
    "dev": "next -p 3334",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },

さっきやったこいつ生きたやん！！感動！

もうとりあえずいいやとおもった。ｗ

② 調査中気になるやつ見つけた

こいつ。
https://yarnpkg.com/package/pnpm
yarnを止めようと思って行動しているのに、yarnでpnpmを呼べるらしい。

なんか…デボラと結婚しようと思っているのに、ビアンカに水のリング探し手伝わせてる気分だね。わたしは絶対ビアンカだけど。

でもこれも実験したかった。brewじゃなくてこっちでもやれそうな気がしないでもない。

③ corepackってなにも触ってないけどいいんかな

ここに書いてあるんですが、Node.jsのパッケージマネージャのcorepackを有効化せよってゆってる。

確かに、corepackっていうやつは入っているみたい。

$ corepack -v
0.15.1

はじめましてー。こいつなんとかしたほうがいいんかな。パッケージマネージャはHomebrewがある（と言っていいのか？）からもういいんかな。
もう、pnpm devが起動するからとりあえず困った時また考えることにします。

④ node_modulesがちょっときもちわるい

なんだか、node_modulesのディレクトリ構成がボコボコだった。

node_module
├──いろいろあって 
└── react（例）
    └── なんかいろいろ
    └── node_modules（再登場）
          └── .bin
	      └── loose-envify
　　　　　　　　└── package.json
├── などというように、たくさんのファイルが階層構造をなしてしまわれているし体感メッチャファイル数減った
└── .modules.yaml（なんかわからんyaml）

今のnode_modulesは、本当に必要なものだけあって（いままではそうじゃなかったのかといえば、そうでもないと思うけど）、なんか仲間はまとまったりしてるのかな？わからないけど軽くなったっぽい。
これもPCのメモリ食ってるんだって。へえー。

⑤ いったんパッケージのインポートがバグる

ほらみて！いったんバグるんです

でさあ、でも動くしさあ、なんなのっておもうじゃないですか、この赤い波線。

なおしかた（ほんとにこれでいいかわかんない）

いったん落としてもっぺん開く（結局古典的）

なんかクイックフィックスも効かんので、これでなんとかしました。

以上、報告でしたー。