Question

我正在尝试将Stencil和Storybook集成到同一个项目中。我一直在关注this set up guide和this one，但其中一个步骤是将组件库发布到NPM，而则不是我想要的。

我已经使用组件库（src文件夹）配置了这个repo，并且使用了Storybook的这些组件的审阅者，它位于storybook文件夹中。

问题在于，当我使用Stencil编译组件并复制Storybook应用程序中的dist文件夹并导入组件时，没有任何渲染。使用custom head tags调整配置我能够正确导入它，但没有应用任何样式。

当我打开网络面板时，导入组件时出现错误：

因此组件存在于DOM中，但可见性设置为隐藏，我认为它在出现错误时会执行。

这是组件au-button：

import { Component } from '@stencil/core';

@Component({
  tag: 'au-button',
  styleUrl: 'button.css',
  shadow: true
})
export class Button {
  render() {
    return (
      <button class="test">Hello</button>
    );
  }
}

这是我的组成部分的故事：

import React from 'react';
import { storiesOf } from '@storybook/react';

import '../components/components.js'

storiesOf('Button', module)
  .add('with text', () => <au-button></au-button>)

这些是Storybook应用程序中的脚本：

"scripts": {
    "storybook": "start-storybook -p 9009",
    "build-storybook": "build-storybook",
    "copy": "cp -R ./../dist/* components"
  },

工作流程如下：


启动故事书

在组件中进行更改

执行构建命令

执行复制命令

此外，我想自动化开发人员体验，但在我首先解决此问题之后。

我可能做错什么的想法？

Answer 1

此示例可以在回购中找到 https://github.com/shanmugapriyaEK/stencil-storybook。它通过旋钮和注释自动生成故事。它还具有自定义主题。希望对您有所帮助。

Answer 2

我一直在关注此设置指南，但是其中一个步骤是将组件库发布到NPM，而这不是我想要的。

我对这些指南的阅读是他们将“发布到NPM”作为将文件放在已知网址上的一种方式，这种方式最适合部署。

如果不这样做，您需要找出不同的部署策略。您将如何获得已发布的构建产品 - dist目录和static文件，以便您的HTML能够在已知的URL上引用它？通过选择偏离指南，这就是您必须手动解决的问题。

这不是一个不可克服的问题，但并非所有人都能解决。您已选择（出于自己的原因）拒绝操作指南提供的解决方案，这意味着您接受“我知道我想要的”的外衣： - ）

Answer 3

我正在使用@storybook/polymer，对我来说效果很好。

按照您的示例：

import { Component } from '@stencil/core';

@Component({
  tag: 'au-button',
  styleUrl: 'button.css',
  shadow: true
})
export class Button {
  render() {
    return (
      <button class="test">Hello</button>
    );
  }
}

故事将是：

import { storiesOf } from '@storybook/polymer';

storiesOf('Button', module)
  .add('with text', () => <au-button></au-button>)

package.json中的脚本：

"scripts": {
    "storybook": "start-storybook -p 9001 -c .storybook -s www"
  },

故事书配置文件：

import { configure, addDecorator } from '@storybook/polymer';
const req = require.context('../src', true, /\.stories\.js$/);
function loadStories() {
  req.keys().forEach((filename) => req(filename))
}
configure(loadStories, module);

和故事书preview-head.html，您必须在正文中添加以下内容：

<body>
    <div id="root"></div>
    <div id="error-message"></div>
    <div id="error-stack"></div>
</body>

如何将StencilJS组件嵌入Storybook React App中？

3 个答案: