Rails + vueの環境にstorybookを導入する

Railsそんな関係ない気がするけどバージョンもろもろ上げたらエラーでたので、storybook入れたときのwebpakerの編集した箇所も記載。

とりあえずstorybook入れる

$ yarn add @storybook/cli
$ npx getstorybook
$ yarn run storybook

ここまでやったら

• .storybook
• stories

の2つのディレクトリが作成され、いろいろ追加される。

エラーの対応

vue-loader-14.2.2 から vue-loader-15.7.0に変更

@rails/webpacker-3.5 から @rails/webpacker-4.0.7 に変更(多分関係ないかも。)

参考 : https://ja.stackoverflow.com/questions/47775/storybook-for-vue%E3%81%A7-failed-to-mount-component-template-or-render-function-not-de

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": "> 1%",
        "uglify": true
      },
      "useBuiltIns": true
    }]
  ],

  "plugins": [
    "syntax-dynamic-import",
    "transform-object-rest-spread",
    ["transform-class-properties", { "spec": true }]
  ]
}

から

{
  "presets": [
    ["@babel/preset-env", {
      "modules": false,
      "targets": {
        "browsers": "> 1%",
        "uglify": true
      },
      "useBuiltIns": true
    }]
  ],

  "plugins": [
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-proposal-object-rest-spread",
    ["@babel/plugin-proposal-class-properties", { "spec": true }]
  ]
}

に変更

インストールしたもの

$ yarn add @babel/preset-env @babel/plugin-syntax-dynamic-import @babel/plugin-proposal-object-rest-spread @babel/plugin-proposal-class-properties

• @babel/plugin-syntax-dynamic-import
• @babel/plugin-proposal-class-properties
• @babel/plugin-proposal-object-rest-spread
• @babel/preset-env

既存のvueも反応するように

vue-loader-14.2.2 から vue-loader-15.7.0に変更することによって少しエラーがでたので、

参考 : https://github.com/rails/webpacker/issues/2162

既存のVueファイル

<template lang="pug">
  div
    p 
      | {{ message }}
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

@Component
export default class HelloVue extends Vue {
  message : string = 'Hello Vue!'
}
</script>

<style lang="scss" scoped>
p {
  font-size: 2em;
  text-align: center;
  color: #0ff;
}
</style>

const { environment } = require('@rails/webpacker')
const typescript =  require('./loaders/typescript')
const vue =  require('./loaders/vue')
const pug = require('./loaders/pug')

environment.loaders.append('typescript', typescript)
environment.loaders.append('vue', vue)
environment.loaders.prepend('pug', pug)
module.exports = environment

から

const { environment } = require('@rails/webpacker')
const typescript =  require('./loaders/typescript')
const { VueLoaderPlugin } = require('vue-loader')
const vue =  require('./loaders/vue')
const pug = require('./loaders/pug')
const cssLoader = environment.loaders.get('css')

environment.loaders.append('typescript', typescript)
environment.plugins.prepend('VueLoaderPlugin', new VueLoaderPlugin())
environment.loaders.prepend('vue', vue)
environment.loaders.prepend('pug', pug)
cssLoader.use=[
  {'loader':'vue-style-loader'}, 
  {'loader': 'css-loader'},
  {'loader': 'sass-loader'}
];
module.exports = environment

に変更。

これで

$ ./bin/webpack-dev-server

$ yarn storybook

を起動させてもエラーが出なくなる！