Laravel Mix + Storybook = Love

Shuyi 的个人博客 / 1158 / 0 / 创建于 5年前 / 更新于 5年前

前言

Storybook是前端开发的神器, 翻译成中文就是故事书。你改 Vue，JS， SCSS 文件，它马上可以显示，不用刷新。而且可以根据 Component 来一个个渲染，十分直观；对于测试，还有 UI/UX 设计师都是好东西。最重要的是，在开发完成前，不用放入现有的路由（Laravel 或者 VueRouter 内），也先不用做一个 Blade 文件。而且可以根据故事，加入不同的 Props ，然后看看在各种情况下，前段长啥样。

问题

Laravel 开发师们，因为我们有 Laravel Mix ，完全不会想去自己写 webpack 配置文件，也没有 webpack 配置文件，和 Babel 配置； Laravel 所用的目录也和 Vue-Cli 不同，所以很难照抄网上现有的教程。Storybook 也不会读 webpack.mix.js ，所以很多东西无法编译。还有很多包（比如说 sass， vue－template－compiler）是没有“安装”的，所以会有很多错误。

安装

我的 Laravel Mix 版本是 4.0，我也建议大家升上去（不难生）。不过本方法理论上 3.0 可以用，不过 2.X 绝对用不了。目录版本是 5.6+的了,如果你还是 5.5, 记得把 components/ 写成 components/resources/

安装 Storybook Vue 其实很简单，你这么做就好了：

yarn add --dev @storybook/vue vue-template-compiler babel-preset-vue fibers sass-loader sass url-loader file-loader

或者

npm install --save-dev @storybook/vue vue-template-compiler babel-preset-vue fibers sass-loader sass url-loader file-loader

然后，在 package.json 的 scripts 里加上：
"storybook": "start-storybook -p 9001 -c .storybook"

日后，就可以直接 yarn run storybook or npm run storybook 啦。

配置

建立一个 .storybook 目录, 以下所有文件都放在这个目录：
在目录里加上 .babelrc , 内容如下：
```
{
"presets": ["@babel/preset-env"]
}
```
这样子就保证编译的是 ES6 。
加上 webpack.config.js ，这个文件千万别放到 Laravel 的根目录上，不然你 Laravel Mix 就不好使了。这个是专属于 Storybook 的 Webpack 配置，保证了 resources 下所有文件可以被编译，而且还不会出现 jQuery 问题（好多插件这年头还在用 jQuery，摊手。。。）。这里的 SASS 编译器是 Dart-SASS，如果你要用 Node-SASS, 把
```
options: {
                    implementation: require("sass"),
                    fiber: Fiber
                }
```
踢掉就好了。

const path = require("path");
const Fiber = require('fibers');
const webpack = require('webpack');

module.exports = (baseConfig, env, defaultConfig) => {
    defaultConfig.plugins.push(
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        })
    );

    defaultConfig.resolve.alias = {
        jQuery: 'jquery/src/jquery',
        '$' :  'jquery/src/jquery',
        'vue$': 'vue/dist/vue.js'
    };

    defaultConfig.module.rules.push(
        {
            test: /\.scss$/,
            use: [
                "style-loader", // creates style nodes from JS strings
                "css-loader", // translates CSS into CommonJS
                {
                    loader: "sass-loader",
                    options: {
                        implementation: require("sass"),
                        fiber: Fiber
                    }
                }
            ]
        },
        {  test: /\.css$/,
            loader: 'style-loader!css-loader',
            include: __dirname
        },
        {
            test: /\.(woff|woff2)$/,
            use: {
                loader: 'url-loader',
                options: {
                    name: 'fonts/[hash].[ext]',
                    limit: 5000,
                    mimetype: 'application/font-woff'
                }
            }
        },
        {
            test: /\.(ttf|eot)$/,
            use: {
                loader: 'file-loader',
                options: {
                    name: 'fonts/[hash].[ext]'
                }
            }
        }
        }
        );
    defaultConfig.resolve.extensions.push(".scss");
    return defaultConfig;
};

Config.js. Storybook 的配置文件. 这个自动加载你所有的故事，并且读取你给Mix的 app.js, app.scss。如果你有其他的配置文件（一般是丢在 app.js) 内啦，不过也有特殊情况，也是放这里。

import { configure} from '@storybook/vue';
import '../resources/js/app';
import '../resources//sass/app.scss'

// automatically import all files ending in *.stories.js
const req = require.context('../resources/js/', true, /.stories.js$/);

function loadStories() {
    req.keys().forEach(function (filename) {console.log(filename);req(filename)});
}

configure(loadStories, module);

写出你的一个故事

这里用大家都有的 Example.vue 文件做例子。在 Example.Vue的旁边，新建一个 Example.stories.js。文件内容如下：

import { storiesOf }   from "@storybook/vue";
import example from "./example";

storiesOf("Example Component", module)
    .add("main page", () => {
              return {
                components : {example},
                template   : `<example></example>`
            }
    });

然后，跑： yarn run storybook 或者 npm run storybook ，这时候你会发现很多错误和警告。没关系，看他说差什么包，你就装什么包。一般包装全了，就没事了。

进入 localhost:9001 ，左边的导航会看到你刚刚写的故事。然后，开始测试吧！

后言

Storybook 会出很多意外，因为无法直接套用 Laravel Mix用的配置，所以渲染方面，很多图像，字体可能会消失（建议你把字体装到系统里）。而且没有在 Windows 底下试过，你们试了告诉我哈。。。如果你是一个会写 Webpack 配置的上神，那么这些问题你自然没有。不过，你可以同时间看到，你的程序在不同状况下的不同姿态，并且可以实时修改，是很舒服，很省时间的。如果有问题，回复PO在下面，看看大家都遇到了什么状况。