dnrsm.dev

  • Archives
  • About
  • Works
  • GitHub

Vue + Composition API + TypeScript + WebpackなプロジェクトでStorybookを構築する

2020-06-26

Table of Contents

概要

Vue + Composition API + TypeScript + WebpackなプロジェクトでStorybookを構築する機会があったのでメモとして残しておく。

初期設定

以下の公式ガイドを参考に今回は自動セットアップで構築した。 Storybook for Vue

以下のコマンドを叩けばStorybookを実行できるまでの初期設定が完了する。

npx -p @storybook/cli sb init --type vue

自動セットアップで加えられる変更

package.jsonに以下の変更が加えられる。 npmスクリプトと依存関係が追加される。

package.json
{
  ...
  "scripts": {
    ...
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook"
  },
  ...
  "devDependencies": {
    ...
    "@babel/core": "^7.10.3",
    "@storybook/addon-actions": "^5.3.19",
    "@storybook/addon-links": "^5.3.19",
    "@storybook/addons": "^5.3.19",
    "@storybook/vue": "^5.3.19",
    ...
  },
  ...
}

.storybookstoriesディレクトリが追加される。

.storybook
└── main.js
stories
├── 0-Welcome.stories.js
├── 1-Button.stories.js
├── MyButton.js
└── Welcome.js

yarn storybookを叩くとStorybookが起動する。 yarn build-storybookを叩くとStorybookを静的なアプリとして書き出せる。 デフォルトだとstorybook-staticディレクトリに出力される。 出力先を変えたいなら以下のようにする。

package.json
"scripts": {
  "build-storybook": "build-storybook -o out"
},

他のCLIオプションは以下を参考に。 https://storybook.js.org/docs/configurations/cli-options/

ストーリーをTypeScriptで書けるようにする

ガイドを参考に.storybook/main.jsを修正します。 import時のaliasとts-loaderの設定を追加します。 Custom Webpack Config

.storybook/main.js
const path = require('path');

module.exports = {
  stories: ['../stories/**/*.stories.ts'],
  addons: ['@storybook/addon-actions', '@storybook/addon-links'],
  webpackFinal: (config) => {
    config.resolve = {
      extensions: ['.ts', '.js'],
      alias: {
        "@": path.join(__dirname, "../js/"),
        vue$: "vue/dist/vue.esm.js" // 'vue/dist/vue.common.js' for webpack 1
      }
    };
    config.module.rules.push({ // TypeScriptに対応する
      test: /\.ts$/,
      exclude: /node_modules/,
      use: [
        {
          loader: 'ts-loader',
          options: {
            appendTsSuffixTo: [/\.vue$/],
            transpileOnly: true
          },
        }
      ],
    });
    return config
  },
};

プロジェクトのWebpackの構成を再利用したい場合は、Storybookの構成にインポートしてマージすることもできる。 Custom Webpack Config#Using Your Existing Config

ストーリーを追加して確認してみる

stories/atom/Btn.stories.ts
import Button from "@/components/atoms/Button.vue";

export default {
  title: 'Atoms|Button'
};

export const BasicButton = () => ({
  components: { Button },
  template: '<Button/>',
});

export const PrimaryButton = () => ({
  components: { Button },
  template: '<Button :primary="true" />'
});

ちゃんと表示されればOK。

storybook01

グローバルなSCSSを読み込む

.storybook/Decorator.vueを作成して<style lang="scss">に読み込ませたいSCSSをimportする。

.storybook/Decorator.vue
<template>
  <div class='decoarator'>
    <slot name='story'></slot>
  </div>
</template>
<script>
  export default {
    name: 'Decorator'
  }
</script>

<style lang="scss">
@import "@/styles/global.scss";
</style>

.storybook/config.jsを作成します。 addDecoratorDecorator.vueを設定します。

.storybook/config.js
import { addDecorator } from '@storybook/vue';
import Decorator from './Decorator.vue';

addDecorator(() => ({
  components: { Decorator },
  template: `<decorator><story slot="story" /></decorator>`
}));

.storybook/main.jsに以下を追加します。 sass-resources-loaderで変数などをまとめたscssファイルをwebpackで読み込むようにしていたので、StorybookのWebpackにも設定します。

.storybook/main.js
module.exports = {
  webpackFinal: (config) => {
    ...
    config.module.rules.push({
      test: /\.scss$/,    
      loaders: ['style-loader', 'css-loader', 'sass-loader']
    });
    config.module.rules.push({
      test: /\.(css|scss)$/,
      use: [
        {
          loader: "sass-resources-loader",
          options: {
            resources: [path.resolve(__dirname, "../sass/_vars.scss")]
          }
        }
      ]
    });
    ...
  },
};

Composition APIに対応する

.storybook/config.jsに以下を追加。これだけ。

.storybook/config.js
import Vue from 'vue'
import VueCompositionApi from '@vue/composition-api'
Vue.use(VueCompositionApi)

headに任意のタグを追加したい

外部のJSとかCSSを読み込みたかったのでheadタグに追加できるように設定した。 .storybookpreview-head.htmlを追加して、以下のように記述すればOK。 Add Custom Head Tags

.storybook/preview-head.html
<link rel="stylesheet" href="https://hoge.com/hoge.css">
<script src="https://hoge.com/hoge.js"></script>

静的ファイルを読み込みたい

/static/images/hoge.pngの画像を下記のように読み込んでいるとする。

<img src="/images/hoge.png" />

静的ファイルのディレクトリの起点をCLIのオプション(-s, --static-dir <dir-names>)で設定する。

package.json
"scripts": {
  "storybook": "start-storybook -s ./static -p 6006",
},

まとめ

既存コンポーネントをストーリーとして追加することまではできた。 追加したアドオンなどについてもそのうち書く。 初期構築から細かい設定まですることで挙動やコツとかの理解が多少進んだ。

Gatsbyでブログを作りましたGatsbyのブログに目次を追加した
© 2020 dnrsm.dev