レードルを試す-ストーリーブックの代替

5141 ワード
tutorial react vite webdev テキストリンク
このポストでは、私は試してみましょうLadle , 物語の代替案に基づいてVite 技術、そして、時間がstorybookのために降りて来て、その冠をその産業の成分カタログリーダーとして食べるようにするかどうか見てください.
私はお菓子について読んだrecent React Status issue , そして、コンポーネントのカタログはカスタムコンポーネントの開発の重要な部分であると信じています.彼らはより良い、より速く、それはあなたのDXに持っている肯定的な影響を大きくします.
Ladleは、すでにストーリブックが有効になっているプロジェクトの中で解決策を使用することがシームレスであるべきだと主張しています.あなたは、これは常にケースではない、これらの主張が現実に直面しているときに多くのことが間違って行くか、余分な複雑になることを知っている.
それで、あなたはどのように後ろに横たわって、私にyaのために最初の溝を掘るようにしました;
マイ@pedalboardr/components パッケージは現在、それを有効にストーリーブックを持っており、それはよく動作し、物語もあります.私はそれを維持したいと思いますが、より良いパフォーマンスのための約束をお楽しみください.私は、レードルの仕事、“契約ブレーカー”を作るために、ストーリーコードの任意の小さな変化を考慮します.
コンポーネントパッケージとランニングyarn storybook ブラウザでOpen Storybookを1つのページネーションコンポーネントで開きます.

ここでは何も新しい、レードルから始めましょうdocs .
私達はレードルを取り付けるyarn add -D @ladle/react これは、これが動作するために必要なパッケージです.docsは"- d "paramについては触れていませんが、コンポーネントカタログのみがdevモードになっていれば追加したいと思います.
医者は、Ladleがこのパターンの物語を探すと主張します.src/**/*.stories.{js,jsx,ts,tsx} , それで、私は私の物語が見つかると仮定します.
クラフトシップシップのために、新しいスクリプトをパッケージに追加します.絵本の直後にレードルを起動するJSON :
"scripts": {
       "test": "jest",
       "lint": "eslint ./src",
       "storybook": "start-storybook -p 6006",
       "ladle": "ladle serve",
       "build-storybook": "build-storybook",
       "cy:open": "cypress open-ct",
       "cy:run": "cypress run-ct"
   },
試してみる時間yarn ladle神聖な天!😳
それは速く燃えていた.いいえ、ウェブパックのバンドル、それはちょうど私のブラウザにポップアップ表示されます.私は再びそれをチェックして、特定の平均を得るために各々の3回を実行して、ここで若干の数を得なければなりません:
物語の打ち上げは10代の
レードル発射は、3 s
7 sの違い.非常に印象的!
下にどのように見えるかを見ることができます.童話よりも派手なが、私たちは本当にブランクブライトの私たちのステージをラップ気にしない.私はこのカタログにすべての必要な機能を迅速に私のコンポーネントを表示するに興味があります.

それで、我々はそれが発射で速く燃えるということを知っています.どのようにホットモジュールのリロードは、コンポーネントの変更に反応する方法を見てみましょう-ストーリーブックのwebpackは、簡単な変更のために約150 msを取る間、それはレードルは即座に、スナップインを行うようです!
「ノブ」は予想通りに動作しています(このケースのものは非常に基本的ですが)、右のパネルの話をクリックするとコンポーネントが消えます😦 バグ?
おそらく、これは私が1つの物語を持っているという事実のためですか?別のストーリーを追加してみてください.
HMM
物語はすぐに新しい物語を追加しましたが、レードルはそれを無視するようです.私はそれを再起動しようとすると確かに新しい物語が表示されます.右側のパネルの記事をクリックすると、現在のように動作します.
私は実際の物語への変更はすぐにレードルに反映されていないとページのリフレッシュを必要とすることに注意してください.コンソールは、VITE HMRが「ホットアップデート」を受けたが、何も起こりません.奇妙だ.として予想されるように再読み込みをブック.
私がここで何か悪いことをしていないならば、これは彼らがそうすることができるのと同じくらいすぐにレードルチームによって世話されなければならないバグです.あるようだissue 既にその件について.
はい、これは今のところの基礎をカバーしていると思いますが、私は認めなければなりません.
私は、Ladleが提供するより多くの特徴があると確信します、しかし、この時点で、私はそれが私が私のコンポーネントカタログを支持することを望む基本的な特徴で全くそこにいないと感じます.
このプロジェクトは非常に有望です、そして、私は私が現在経験している問題がすぐに解決されると信じています.そして、ここでの速度改善は我々が無視することができない何かです.
いつものように、どのようにこれを行うことができます上の任意のコメントや提案がある場合は、私たちの残りの部分と共有することを確認してください.
おい!あなたがちょうどTwitterでチェックアウトを読んだことが好きなら🍻
写真でCaroline Attwood on Unsplash
どのように我々はCLIの統合テストを書いた
HTML-テキスト入力を使用するときに使用するラベルの書き込み読後感