Storybookで参照するディレクトリとビルドするディレクトリを変更する

2022.10.01

Storybookで使用するストーリーの読み込み元と、ビルド時の出力先を変更する方法をメモ。

設定方法

まずストーリーを配置するディレクトリの変更ですが、.storybook/main.jsのstoriesの項目で変更できます。
デフォルトでは以下のようになっていて、storiesディレクトリ内のストーリーをロードするように設定されています。

module.exports = {
  "stories": [
    "../stories/**/*.stories.mdx",
    "../stories/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  〜 略 〜
}

今回はsrc/storybook/内のストーリーを読み込むように変更してみます。

module.exports = {
  "stories": [
    "../src/storybook/**/*.stories.mdx",
    "../src/storybook/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  〜 略 〜
}

これでstories/ではなくsrc/storybook/内のストーリーを読み込むように変更されました。

次にビルド時の出力先ですが、ビルドコマンドのオプションの「-o」を使うことで出力先を設定できます。
今回はhtdocs/storybook/にビルドされるようにしてみます。

build-storybook -o htdocs/storybook/

package.json内のビルドコマンドを変更します。

{
  "scripts": {
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook -o htdocs/storybook/"
  },
  〜 略 〜
}

下記コマンドでビルドを実行してみます。

npm run build-storybook

これでhtdocs/storybook/にビルドされたことを確認できました。

参考サイト

土