🏗️

Storybook 7.0-alpha.25 から framework オプションで vite-builder が指定できるようになった

2022/08/27に公開

React

はじめに

タイトルの通り。

以下の記事で、フレームワークの指定に builder も含むように変更がされたけど、webpack5 しか指定できないと書いた。

実際、storybook 7.0-alpha.24 までは、"framework": "@storybook/react-vite" のように Storybook のビルダーに vite を指定しても、Error: no builder configured! というメッセージが表示されて、利用できなかった。

React・Vue3・Svelte で vite-buidler が指定できるようになった

7.0-alpha.25 では、vue3 と react で、vite が指定できるようになった。

また、7.0-alpha.26 ではそこに svelte も追加された。

これらのフレームワークを利用する場合は、framework オプションに、react-vite や vue3-vite などを指定すれば利用できるようになっている。

また、pnpm で monorepo の構成を取っている場合は、@storybook/addon-essentials がだけ入っている状態だと動かないので、 6.5 から変わっていないが以下のパッケージを自分で devDependencies に追加しておく必要がある。

@storybook/preview-web
@storybook/client-api
@storybook/addons
@storybook/addon-docs
@storybook/addon-actions
@storybook/addon-backgrounds
@storybook/addon-measure
@storybook/addon-outline
@storybook/addon-highlight
@storybook/core-client
@storybook/channel-postmessage
@storybook/channel-websocket

この辺については以下の Issue が詳しい

その他

7.0-alpha.26 には以下の automigration に関する変更も入っていた。

この PR の中に以下のような変更があった。

  '@storybook/vue': {
    webpack5: '@storybook/vue-webpack5',
-    vite: '@storybook/vue-vite',
+    // TODO: bring this back if we ever want to support vue 2 + vite. Else delete this!
+    // vite: '@storybook/vue-vite',

Storybook での Vue 2 + vite のサポート切ろうとしているのかな？と思った。
Vue 2 のサポートは 2023 末まで続くので Vue 2 + vite で開発している人はいると思う。その人達は vite-builder で storybook を使いたいと思うので、詳しいことはよくわからないけど、それなりに気になるなと思った。

はじめに

React・Vue3・Svelte で vite-buidler が指定できるようになった

その他

Discussion