Question

我有一个Typescript Vue monorepo项目（纱线工作区），其中包括3个程序包：Web，样式和组件。对于组件包，我想利用故事书进行视觉测试和隔离开发。

将这些组件导入Web项目时，这些组件可以正常工作，但是运行故事书时出现以下错误：

Module not found: Error: Can't resolve './../components' in 'jdk-darts-frontend/packages/jdk-darts-components/.storybook'
 @ ./.storybook/config.ts

Storybook Manager Webpack配置似乎存在打字稿/ Vue导入问题。

故事书配置：

import Vue from 'vue';
import {addParameters, configure} from '@storybook/vue';
import {Button, Card, FinalInput, Icon, Input, Modal, Table} from './../components';

...

Vue.component('d-button', Button);
Vue.component('d-card', Card);
Vue.component('d-icon', Icon);
Vue.component('d-input', Input);
Vue.component('d-final-form-input', FinalInput);
Vue.component('d-modal', Modal);
Vue.component('d-table', Table);

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

configure(loadStories, module);

Storybook Manager Webpack配置：

async function managerWebpack(config, options) {
  config.resolve.extensions.push('.ts', '.tsx', '.vue', '.css', '.scss', '.html');

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

  config.resolve = {
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': path.dirname(path.resolve(__dirname, "../components")),
    },
  };

  return config;
}

module.exports = {
  managerWebpack: managerWebpack,
};

Storybook模板Webpack配置

module.exports = async ({config}) => {
  config.resolve.extensions.push('.ts', '.tsx', '.vue', '.css', '.scss', '.html');

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

    config.module.rules.push({
        test: /\.scss$/,
        use: [
            'vue-style-loader',
            'css-loader',
            {
                loader: 'sass-loader',
                options: {
          data: `@import "~jdk-darts-styles/scss/index.scss";`,
          implementation: require('sass'),
        },
      },
        ],
    });

    config.resolve = {
        alias: {
            'vue$': 'vue/dist/vue.esm.js',
      '@': path.dirname(path.resolve(__dirname, "../src")),
    },
    };

    return config;
};

使用多个index.ts文件导入组件。

GIT存储库：https://bitbucket.org/jdkdarts/jdk-darts-frontend/src/31606627861f8674486b854de520e294d7aa6ab2/?at=feature/JDKDAR-03_create_new_game

故事书Vue打字稿：找不到模块：错误：无法解决

0 个答案: