TypeScript/pugなVueプロジェクトにStorybookを導入する
loader周りでつまずいたので、メモ
Storybookのインストール
何はともあれStorybook本体をインストールしなければ始まらないのでインストールする
公式のドキュメンテーションにVueプロジェクトへの導入方法が載っている
code:bash
# 対象のプロジェクトのルートディレクトリで次を実行
npx -p @storybook/cli sb init --type vue
次の@storybookパッケージとローダー類がインストールされるとともにconfigが追加される
@babel/core
@storybook/addon-actions
@storybook/addon-links
@storybook/addons
@storybook/vue
babel-loader
babel-preset-vue
追加のローダー類をインストール
上記だけでは足りないので、TypeScript/pugなプロジェクトに合わせて追加していく
今回必要になったのは以下の通り
sass-resources-loader
fork-ts-checker-webpack-plugin
実際webpack.configに読み込ませるローダーはこれ以外にもあるが、プロジェクトにもともとあるので記載は省く
これらを適用した最終的なwebpack.configは次のようになった
code:js
const path = require('path');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
module.exports = async ({ config }) => {
config.resolve.extensions.push('.ts', '.tsx', '.vue', '.css', '.less', '.scss', '.sass', '.html');
// ts-loader
config.module.rules.push({
test: /\.ts$/,
exclude: /node_modules/,
use: [
{
loader: 'ts-loader',
options: {
transpileOnly: true,
},
}
],
});
// scss-loader
config.module.rules.push({ test: /\.scss$/, loaders: ['style-loader', 'css-loader', 'sass-loader',
{
loader: 'sass-resources-loader',
options: {
include: path.resolve(__dirname, '../')
}
}
] });
// pug-loader
config.module.rules.push({ test: /\.pug$/, loaders: 'pug-plain-loader' });
config.plugins.push(new ForkTsCheckerWebpackPlugin());
return config;
};
sass-resources-loaderの箇所に関しては、src以下に共通styleを配置しているため必要になった
pugローダーはtemplateでlang="pug"を指定している今回のような構成のプロジェクトでは必要
それ以外の部分は参考Qiitaの内容と同様
Storybookのconfig
.storybook/config.js を修正してく
今回は、コンポーネントと同じディレクトリ内にstoriesファイルを配置する構成にした
storiesファイルの場所と拡張子のみ変更したが、Vueのプラグインなどが導入されている環境では addDecorator を使ってwrapperコンポーネントを指定したりしてあげる
最終的には次のようになった
code:js
import { configure } from '@storybook/vue';
// automatically import all files ending in *.stories.js
configure(require.context('../src/components', true, /\.stories\.ts$/), module);
その他
Jestなどテストフレームワークのspecファイルなどと同様だが、storiesファイルをどこに配置するかは毎回迷う
一応公式では↓と言っており、コンポーネントファイルと同じ層に配置することを推奨しているらしい
We recommend:
•
└── src
└── components
└── button
├── button.js
└── button.stories.js
参考