0

我最近升级了我们应用程序的过时技术堆栈。其中一部分是从 Storybook 3 升级到 Storybook 5。我按照 Storybook 的官方规范从 3 迁移到 4，然后从 4 迁移到 5。 Storybook 本身运行良好，但是，插件在这个新版本上不起作用。我们将插件用于旋钮、操作和语言环境。

对于旋钮，将显示消息“未找到旋钮”。对于操作，根本不显示任何内容。对于语言环境，我们会显示两种不同的语言环境（英语和德语），但在两者之间切换没有任何作用。

控制台中没有显示错误消息。

我曾尝试删除并重新安装 node_modules，以及尝试使用不同的版本，但均未成功。

这是我们的 config.js：

import { addDecorator, configure } from '@storybook/react';
import { setIntlConfig, withIntl } from 'storybook-addon-intl';

// Load the locale data for all your defined locales
import { addLocaleData } from 'react-intl';
import enLocaleData from 'react-intl/locale-data/en';
import deLocaleData from 'react-intl/locale-data/de';

addLocaleData(enLocaleData);
addLocaleData(deLocaleData);

// Provide your messages
const messages = {
  'en': require('../i18n/translations/en.json'),
  'de': require('../i18n/translations/de.json'),
};

const getMessages = locale => messages[locale];

// Set intl configuration
setIntlConfig({
  locales: ['en', 'de'],
  defaultLocale: 'de',
  getMessages,
});

// Register decorator
addDecorator(withIntl);

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

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

configure(loadStories, module);

插件.js：

import '@storybook/addon-knobs/register';
import '@storybook/addon-actions/register';
import '@storybook/addon-links/register';
import 'storybook-addon-intl/register';

package.json 的相关部分：

"dependencies": {
    "@storybook/addon-actions": "5.1.1",
    "@storybook/addon-info": "5.1.1",
    "@storybook/addon-knobs": "5.1.1",
    "@storybook/addon-links": "5.1.1",
    "@storybook/addon-storyshots": "5.1.1",
    "@storybook/addons": "5.1.1",
    "@storybook/react": "5.1.1",
    "react": "^16.8.6",
    "webpack": "^4.31.0"
  },
  "devDependencies": {
    "@babel/core": "^7.4.4",
    "babel-loader": "^8.0.5",
    "storybook-addon-intl": "^2.4.1"
  }

一个示例故事：

import React from 'react';

import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { withInfo } from '@storybook/addon-info';
import { withKnobs, number, text, boolean } from '@storybook/addon-knobs';

import SvgTest from './SvgTest ';

const stories = storiesOf('Component/SvgTest ', module);
stories.addDecorator((story, context) => withInfo('common info')(story)(context));
stories.addDecorator(withKnobs);

stories.add('SvgTest ', () =>
  <svg
    height={800}
    key={'testKey'}
    width={1000}
  >
    <SvgTest
      objId={text('objId', 'objId')}
      height={number('height', 50)}
      width={number('width', 250)}
      onSelect={action('onSelect')}
      isSelected={boolean('isSelected', true)}
      x={50}
      y={50}
    />
  </svg>,
);
4

0 回答 0