如何为Angular配置视口插件

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,
    },
  },
});

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

Answer 1

[问题与Storybook上的传播运算符有关，因此，要在Angular应用上解决此问题，您应该安装transform-object-rest-spread插件并在Playbook上配置Babel。

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

1. 安装插件：npm install --save-dev babel-plugin-transform-object-rest-spread。
2. 在文件夹.babelrc下创建文件.storybook/（不用担心，Babel在这种情况下只会影响Playbook的配置。更多信息https://storybook.js.org/docs/configurations/custom-babel-config/]]
3. 在文件.babelrc上添加下一个代码：

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

4. 将视口对象包装在对象上，以生成新对象：

选项A

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

选项B

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

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

5. 再次运行故事书并享受;）

希望这行得通！