search

nekochans / lgtm-cat-frontend

lgtm-cat（サービス名 LGTMeow https://lgtmeow.com) のフロントエンド用
https://lgtmeow.com
22 stars 2 forks source link

Vite と Yarn についてのメモ (何かお役に立てましたらと) #205

Open kent7k opened 2 years ago

kent7k commented 2 years ago

概要

yarn で通過したご報告と、もし今後 Vite を採用されるにあたっての共有です。

前提

おかげさまで、以下のようにローカルで立ち上げることができました。動作確認済みです。

ScreenShot__2F65BDE0-DFA0-437C-ADAA-963C1C898C41_000180

ローカルで立ち上げるまでにあったこと

README にあるように、npm ci は通らず、npm install --legacy-peer-deps と打たないと通りませんでした。 バージョンは npm 8.15.0 です。

一方で、yarn 1.22.19 で以下の private repository を削除したところ、スムーズに通りました。

  "dependencies": {
    - "@nekochans/lgtm-cat-ui": "^2.0.4", // 依存関係から削除
ScreenShot__2F65BDE0-DFA0-437C-ADAA-963C1C898C41_000181

そして、@nekochans/lgtm-cat-ui を依存関係に入れるべく、.yarnrc で private repository "@nekochans/lgtm-cat-ui" を install しようとしましたがうまくいきませんでした。@nekochans/lgtm-cat-ui のベースが npm だからなのかもしれません。結果として、上述の # 前提 には npm と .npmrc によって辿り着きました。

もしかしたら npm ci が通らなかったのは私の環境のせいかもしれません。

補足情報

以下は Storybook 6.5 と Vite を連携させている時の package です。何かのご参考になりましたら嬉しいです。 image

もしかしたら yarn の方が相性が良いのかもしれませんという共有でした。

失礼いたしました。

keitakn commented 2 years ago

@kent7k 詳細な情報を頂きありがとうございます🐱！

今後Viteを採用する際に参考にさせて頂きます！

ViteはあくまでもReact用なので、Next.jsのアプリケーションはあまり考慮されていないみたいなので、UIPackage部分である @nekochans/lgtm-cat-ui のBuild環境をViteに置き換えられないかなーと思っていたところです、StorybookがViteで動作するのであれば問題なさそうですね👍

kent7k commented 2 years ago

あっ すみません 見当違いを💦 なるほど 良いですね！

（僕は Storybook をチーム内のテストでしか使ったことがなくて、UI についてあのような見せ方があるのか！ と勉強になりました🙇）

keitakn commented 2 years ago

@kent7k とんでもないです、コメントありがとうございます🐱

chromatic ってサービスでStorybookを公開しているのですが、簡易的なvisual regression test機能があって、こんな感じでUIの差分を見れるのは便利ですね！

https://www.chromatic.com/test?appId=62729802bbcc7d004a663d4c&id=63182e9ad5cba4af51b1904e

kent7k commented 2 years ago

@keitakn そんなことができるんですね！！ 最近 regression test というものを知って、試しに入れてはいたのですけど、そのようなことができるなんて すごい便利ですね…

ScreenShot__2F65BDE0-DFA0-437C-ADAA-963C1C898C41_000187

keitakn commented 2 years ago

@kent7k

regression test

Storybook上で regression test が出来るんですね！

chromatic に関しては下記の記事にまとめてありますので、もし興味があれば見て頂けると:pray:

https://zenn.dev/keitakn/articles/storybook-deploy-to-chromatic

kent7k commented 2 years ago

現在のプロジェクトの API サーバーがまだ完成していないので、統合する時のために先にローカルでエラーチェックを進めておきたかったという背景があります。

@keitakn お〜！ github Actions 付き！ ありがとうございます！！