実行環境
| ライブラリ | バージョン |
|---|---|
| SvelteKit | 1.0.0-next.121 |
| storybook-builder-vite | 0.0.10 |
| @storybook/svelte | 6.4.0-alpha.11 |
インストール
npx sb@next init --builder storybook-builder-vite
SvelteKitがviteでバンドルされているので、Storybookもviteでバンドルされるものを使用する。
これを実行すると
- .storybook
- src/stories
が生成される
SvelteKitで動くようにする
SvelteKitプロジェクトではpackage.jsonに"type": "module"が設定されているので、このままでは動かない。
拡張子の変更
.storybook/main.js → .storybook/main.cjs
.storybook/preview.js → .storybook/preview.cjs
ESMファイルに対してrequireは出来ないのでコメントアウトする。
Storybook内でsvelte.configを読んでる?
// .storybook/main.cjs
svelteOptions: {
//"preprocess": require("../svelte.config.js").preprocess
}
aliasを設定する
import Hoge from "$lib/Hoge.svelteのようなコードが動かないのでaliasを設定する。
$appは以下のような設定をするとdevサーバ起動時にエラーは起こらなくなったが、ランタイムでエラーが発生してしまった。
回避策が思いつかなかったので一旦放置で
// .storybook/main.cjsに追加
async viteFinal(config, { configType }) {
const { resolve } = await import('path');
// customize the Vite config here
config.resolve.alias = {
$lib: resolve('src/lib'),
$app: resolve('node_modules/@sveltejs/kit/assets/runtime/app')
};
// return the customized config
return config;
}
参考
https://github.com/sveltejs/kit/issues/1485
https://github.com/storybookjs/storybook/issues/14929