javascript - TypeScript 中带有 Vue 的 Storybook 如何从 .storybook.ts 文件（Webpack 配置）导入？

Question

我在 TypeScript 中使用 Storybook 和 Vue。目前还没有官方的 TypeScript 配置可以将 Vue 与 storybook 结合使用。

如何配置 Webpack 以便在 .storybook.ts 中我可以从另一个 .storybook.ts 文件导入？

目前我收到一个错误：

ERROR in ./src/components/Button/Button.stories.ts
Module not found: Error: Can't resolve '../Icon/Icon.stories'
in '/Users/dude/monorepo/frontend/storybook/src/components/Button'

通过此导入：

import AppButton from './Button.vue';
import { iconPackOptions, iconPackDefaultValue } from '../Icon/Icon.stories';

当src/components/Icon/Icon.stories.ts文件具有如下内容时：

import { storiesOf } from '@storybook/vue';
import { withKnobs, text, select } from '@storybook/addon-knobs';

import AppIcon from './Icon.vue';

// Knobs grouping
const groupId01 = 'icon';

// Icon Pack
export const iconPackOptions = {
  None: false,
  FontAwesomeProRegular: 'far',
  FontAwesomeFreeBrands: 'fab'
};
export const iconPackDefaultValue = iconPackOptions.FontAwesomeProRegular;

使用./.storybook/webpack.config.js文件内容：

const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const path = require('path');

module.exports = async ({ config }) => {

  config.module.rules.push({
    test: /\.css$/,
    loaders: ['style-loader', 'css-loader', 'postcss-loader'],
    include: path.resolve(__dirname, '../'),
  });

  config.module.rules.push({
    test: /\.scss$/,
    use: ['style-loader', 'css-loader', 'sass-loader'],
    include: path.resolve(__dirname, '../assets/styles')
  });

  config.resolve = {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      vue$: 'vue/dist/vue.esm.js',
      'assets': path.resolve('../src/assets'),
      '@': path.join(__dirname, '../src'),
    }
  };

  config.module.rules.push({
    test: /\.ts$/,
    exclude: /node_modules/,
    use: [
      {
        loader: 'ts-loader',
        options: {
          appendTsSuffixTo: [/\.vue$/],
          transpileOnly: true
        },
      }
    ]
  });

  config.plugins.push(new ForkTsCheckerWebpackPlugin());

  return config;
};

使用./.storybook/config.js文件内容：

import { configure } from '@storybook/vue';

import '../src/plugins';
import '../src/assets/styles/main.scss';

const req = require.context('../src/components', true, /.stories.ts$/);
function loadStories() {
  req.keys().forEach(filename => req(filename));
}

configure(loadStories, module);

标签： javascripttypescriptvue.jswebpackstorybook

Answer 1

这个.storybook/webpack.config.js和 storysource 插件一起为我工作。如果您不需要故事源，只需删除 use loader 对象@storybook/addon-storysource/loader：

const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const path = require('path');

module.exports = async ({ config }) => {

  config.module.rules.push({
    test: /\.css$/,
    loaders: ['style-loader', 'css-loader', 'postcss-loader'],
    include: path.resolve(__dirname, '../'),
  });

  config.module.rules.push({
    test: /\.scss$/,
    use: ['style-loader', 'css-loader', 'sass-loader'],
    include: path.resolve(__dirname, '../assets/styles')
  });

  config.resolve = {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      vue$: 'vue/dist/vue.esm.js',
      'assets': path.resolve('../src/assets'),
      '@': path.join(__dirname, '../src'),
    }
  };

  config.module.rules.push({
    test: /\.stories\.ts?$/,
    exclude: /node_modules/,
    use: [
      {
        loader: require.resolve('babel-loader')
      },
      {
        loader: require.resolve('@storybook/addon-storysource/loader')
      }
    ]
  });

  config.module.rules.push({
    test: /\.ts$/,
    exclude: /node_modules/,
    use: [
      {
        loader: 'ts-loader',
        options: {
          appendTsSuffixTo: [/\.vue$/],
          transpileOnly: true
        },
      }
    ]
  });

  config.plugins.push(new ForkTsCheckerWebpackPlugin());

  return config;
};