如何为Angular配置viewport插件

Question

根据this documentation，我正在尝试在conifig.js文件中添加自定义视口：

import { addParameters } from '@storybook/angular'; // changing from react to angular
import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';

const newViewports = {
  kindleFire2: {
    name: 'Kindle Fire 2',
    styles: {
      width: '600px',
      height: '963px',
    },
  },
  kindleFireHD: {
    name: 'Kindle Fire HD',
    styles: {
      width: '533px',
      height: '801px',
    },
  },
};

addParameters({
  viewport: {
    viewports: {
      ...INITIAL_VIEWPORTS,
      ...newViewports,
    },
  },
});

但它对我不起作用，因为在angular库中，我们没有addParameters方法的实现。我们如何为angular配置它呢？

Answer 1

这个问题与Storybook上的扩展操作符有关，因此，要在Angular应用程序上修复此问题，您应该安装transform-object-rest-spread插件并在Playbook上配置巴别塔。

您可以按照以下步骤操作：

安装插件：npm install --save-dev babel-plugin-transform-object-rest-spread.

• Create

1. .babelrc下的文件夹.storybook/ (无忧，巴别塔，在这种情况下，只会影响Playbook配置。下面是.babelrc

文件中的下一段代码的更多信息

{
    "plugins": ["transform-object-rest-spread"]
}

1. 将视口对象包裹在对象上生成新对象：

选项A

viewport: { viewports: {...INITIAL_VIEWPORTS, ...newViewports} }

选项B

const myViewports = {...INITIAL_VIEWPORTS, ...newViewports};

addParameters({ viewport: { viewports: myViewports} });

1. 再次运行Storybook并享受其中;)

希望这能起作用！