🏗️

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

2022/08/27に公開

はじめに

タイトルの通り。

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

https://zenn.dev/sterashima78/articles/3ae177ebc06bc5

実際、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 が指定できるようになった。
https://github.com/storybookjs/storybook/releases/tag/v7.0.0-alpha.25

また、7.0-alpha.26 ではそこに svelte も追加された。
https://github.com/storybookjs/storybook/releases/tag/v7.0.0-alpha.26

これらのフレームワークを利用する場合は、framework オプションに、react-vitevue3-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 が詳しい
https://github.com/storybookjs/builder-vite/issues/55

その他

7.0-alpha.26 には以下の automigration に関する変更も入っていた。
https://github.com/storybookjs/storybook/pull/19016

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

https://github.com/storybookjs/storybook/pull/19016/files#diff-6a158972d5601f12356729436fb763f81fce546570d9b7457f9c8ffd2811a86fR27-R30

  '@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 を使いたいと思うので、詳しいことはよくわからないけど、それなりに気になるなと思った。

Discussion

ログインするとコメントできます