storybook 版本升級

如果有看上一篇的話，會發現上一篇的範例用的是 storybook 3.4.10。
因為重新用 webpack4 建立了 Nuxt 2.0 的應用，
storybook 3.4.10 似乎是不相容了啊。

只好先升級到 storybook 4.0.0-alpha。

雖然 storybook 4.0 還未正式發佈，但就來試試看吧。

文章最後會附上升級完後的 branch。

今天會接著將 Day05 的 005-pug-stylus-settings branch 接續開發下去，

首先安裝需要的套件

需要新增的套件：

複製以下套件貼上在 package.json 的 devDependencies。

{
    "@storybook/addon-actions": "4.0.0-alpha.23",
    "@storybook/addon-centered": "4.0.0-alpha.23",
    "@storybook/addon-console": "^1.0.4",
    "@storybook/addon-options": "4.0.0-alpha.23",
    "@storybook/addon-storysource": "4.0.0-alpha.23",
    "@storybook/addon-viewport": "4.0.0-alpha.23",
    "@storybook/addons": "4.0.0-alpha.23",
    "@storybook/vue": "4.0.0-alpha.23",
    "babel-plugin-transform-pug-html": "^0.1.2",
    "babel-preset-vue": "^2.0.2",
    "storybook-readme": "^4.0.0-beta1",
}

再執行 npm i

新增需要的 scripts 指令

在 package.json 中新增以下指令。

"scripts": {
    "storybook": "start-storybook -p 9001 -c .storybook",
    "generate:storybook": "build-storybook -c .storybook -o blog-storybook",
}

新增需要的檔案

• .storybook/addons.js

與 storybook 相關套件都透過 addons.js 引入，storybook 會自動讀取 addons.js。

import '@storybook/addon-storysource/register' 
// 可在 storybook 中看到 component 被如何使用的片段程式碼。

import 'storybook-readme/register' 
// 在 storybook 中顯示 README.md 文件。

import '@storybook/addon-actions/register' 
// 紀錄對 component 的操作

import '@storybook/addon-options/register' 
// 可客製化設定 storybook 的標題、排版或超連結

import '@storybook/addon-viewport/register' 
// 方便切換不同行動裝置大小。

import 的順序會影響功能列表的排列。

• .storybook/config.js

import { configure } from '@storybook/vue'
import { setOptions } from '@storybook/addon-options'
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

// 引入 reset.styl 和 base.styl
import '!!style-loader!css-loader!stylus-loader!../assets/style/reset.styl'
import '!!style-loader!css-loader!stylus-loader!../assets/style/base.styl'


// @storybook/addon-options/register 基礎設置
setOptions({
  name: 'nuxt blog',
  url: 'https://github.com/hunterliu1003/blog',
  addonPanelInRight: true
})

const req = require.context('../components', true, /stories\.js$/)

function loadStories() {
  req.keys().forEach(filename => req(filename))
}

configure(loadStories, module)

• .storybook/webpack.config.js

webpack 的設置如下：

const path = require("path");

module.exports = {
  module: {
    rules: [
      {
        // 這是套件 addon-storysource 所需要的 webpack 設定
        test: /\.stories\.jsx?$/,
        loaders: [require.resolve('@storybook/addon-storysource/loader')],
        enforce: 'pre'
      },
      {
        // pug 設置
        test: /\.pug$/,
        loader: 'pug-plain-loader'
      },
      {
		// stylus 設置
        test: /\.styl(us)?$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'stylus-loader'
        ]
      }
    ]
  },
  resolve: {
    alias: {
	  // nuxt 預設的 alias 有 '@', '@@', '~', '~~' 但是本人只有在用 '@', 有需要可以自己再加。
      '@': path.dirname(path.resolve(__dirname))
    }
  }
};

基本上到此 storybook 升級完成。

新增一個 component 來玩玩

一個元件主要會有 4 個檔案

• index.js
• MyButton.stories.js
• MyButton.vue
• README.md

整合 Storybook ＆ Nuxt.js

既然已經升級完成了，為何 storybook 和 nuxt 還需要整合？

因為在開發過程中發現，有些複雜的元件(SFC)中，會引入 nuxt-link、no-ssr 這種全域的僅屬於 nuxt 的元件。

我的想法就是自己寫兩個全域的元件 nuxt-link、no-ssr 來避免錯誤訊息，同時也可以確保 storybook 和 nuxt 應用兩邊的樣式一致。

以下分享自己的解決辦法，也歡迎大大們提供更好的方法：

將以下兩個全域元件加在 .storybook/config.js 中。

Vue.component('nuxt-link', {
  functional: true,
  render (createElement, context) {
    let allClass = {}
    let arrClass = context.data.staticClass
      ? context.data.staticClass.split(' ')
      : []
    arrClass.forEach(theClass => {
      allClass[theClass] = true
    })
    return createElement('a', { class: allClass }, context.children)
  }
})
Vue.component('no-ssr', {
  functional: true,
  render (createElement, context) {
    return context.children
  }
})

今天的 storybook 版本升級 和 Nuxt 整合

最後附上今天的程式碼連結：

007-storybook-and-nuxt

指令：

git clone -b 007-storybook-and-nuxt --single-branch https://github.com/hunterliu1003/blog.git
cd blog
npm install
npm run storybook