Storybook が 7.0 で複数のフロントエンドフレームワークを持つ monorepo で使いやすくなる
はじめに
この記事を書いている時点で 7.0 は alpha だが、触る機会があったので知ったことを書こうと思う。
一応 7.0 用のドキュメントページはあるけど、まだドキュメントの更新はされていないので役に立たないと思って良い (alpha なので当然)。
6.5 からの変更点を知るにはマイグレーションガイドが役に立つ。
Storybook 6.x までで使いにくかった点
以下のような構成の monorepo 考える。
package.json
packages/
- vue/
- package.json
- react/
- package.json
それぞれのサブパッケージに @storybook/vue3 や @storybook/react をインストールすることになる。
ここで、build-storybook や start-storybook コマンドを使いたいのだがうまくいかない。
例えば、vue パッケージで start-storybook コマンドを実行しても react 用の storybook が起動してしまったりする。
これは、npm パッケージの実行コマンドが、各パッケージから node_modules/.bin へのシンボリックリンクが貼られるために発生する。
start-storybook コマンドは以下の様に各フレームワークごとにある index.js で、build-storybook コマンドは build.jsが実体。
これは package.json を見ればわかる。
つまり、@storybook/vue3 や @storybook/react をインストールしても、いずれか一つのフレームワーク用のコマンドしかシンボリックリンクを作ることができないため上記のような現象が発生する。
ちなみに、これを回避するには、愚直に各フレームワーク用バッケージに含まれる index.js などを叩くように npm scripts などに記述して利用すればいい (上記の構成なら、ルートパッケージに巻き上げられることを踏まえて ../../node_modules/@storybook/vue3/bin/index.js など)。
Storybook 7.0 で変わること
build-storybook や start-storybook が Storybook CLI に統合された。
これによって、monorepo なら ルートパッケージに @storybook/cli をインストールして、各パッケージで、storybook dev や storybook build を実行すれば良くなった。
Storybook CLI は各パッケージにある Storybook の設定 (デフォルトなら、.storybook/main.[t|j]s) を読んで、処理を実行する。
これの結果なのかは知らないが、これまでフレームワーク (react / vue / angular など) の指定とビルダー (webpack5 / vite など) の指定が別れていたが、これが一緒に framework option で指定するように変更された。
現状だと @storybook/react-webpack5 や @storybook/vue3-webpack5 など webpack5 のものだけが利用できるらしいので、今後は @storybook/react-vite など増えていくのかもしれない。
おわりに
Storybook はフロントエンド開発において、多くの場合に利用できるソフトウェアだが、monorepo で複数のフレームワークを利用する場合は、それぞれのフレームワークに対応するパッケージが、同名のコマンドを提供するため利用しにくい点があった。
7.0 ではこれの機能が CLI パッケージにまとめられたため、この問題が解消された。
この他にも、Storybook が依存するパッケージの整理などが行われている。
普段 pnpm を使っているのだが、依存パッケージの扱いなどに問題があるようで、shamefully-hoist しないとまともに動かない状態だった (あるいは、追加で必要なパッケージを自分で追加するとか)。
npm や yarn のパッケージのインストール方法だと、monorepo を作るときに、あるパッケージでインストールしているパッケージを別のパッケージから参照できてしまうのだが、pnpm はこれをある程度厳格にできる。
monorepo の構成のときのパッケージマネージャーは pnpm 一択だと思っているため、pnpm でStorybook を利用しやすくなったのはかなり嬉しい変更だった。
Storybook 7.0 はまだ alpha で、これまでのようなリリーススケジュールは公開されていない (と思う) ため、首を長くして待っていよう。
Storybook 6.0 のリリースに関する Issue
Storybook 6.5 のリリースに関する Issue
Storybook 7.0 のリリースに関する Issue
Discussion