Javascript 如何在Storybook React应用程序中嵌入StencilJS组件？_Javascript_Reactjs_Storybook_Stenciljs

Javascript 如何在Storybook React应用程序中嵌入StencilJS组件？

javascript reactjs

Javascript 如何在Storybook React应用程序中嵌入StencilJS组件？,javascript,reactjs,storybook,stenciljs,Javascript,Reactjs,Storybook,Stenciljs,我正在尝试将其集成到同一个项目中。我一直在遵循，但其中一个步骤是将组件库发布到NPM，这不是我想要的我用组件库（src文件夹）和Storybook组件的审阅者配置了它，Storybook位于Storybook文件夹中问题是，当我使用模具编译组件并复制Storybook应用程序中的dist文件夹并导入组件时，没有任何渲染。使用我能够正确地导入配置，但是没有应用任何样式当我打开网络面板时，导入组件时出现一些错误： import React from 'react'; import { stor

我正在尝试将其集成到同一个项目中。我一直在遵循，但其中一个步骤是将组件库发布到NPM，这不是我想要的

我用组件库（

src

文件夹）和Storybook组件的审阅者配置了它，Storybook位于

Storybook

文件夹中

问题是，当我使用模具编译组件并复制Storybook应用程序中的

dist

文件夹并导入组件时，没有任何渲染。使用我能够正确地导入配置，但是没有应用任何样式

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

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

import '../components/components.js'

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

因此，该组件存在于DOM中，但可见性设置为hidden，我认为在出现错误时会这样做

这是组件

au按钮

：

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

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

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

工作流程如下：

发布故事书

在组件中进行更改

执行构建命令

执行复制命令

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

你知道我做错了什么吗

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

我对这些指南的理解是，它们将“发布到NPM”作为一种将文件放在已知URL的方式，这将最容易用于部署

如果不这样做，您将需要制定不同的部署策略。您将如何发布构建产品——

dist

目录和

static

文件，以便您的HTML能够在已知URL处引用它？通过选择偏离指导原则，这是您必须手动解决的问题

这不是一个不可逾越的问题，但没有一个全面的解决办法。你选择了（出于你自己的原因）拒绝《操作指南》提供的解决方案，这意味着你接受了“我知道我想要什么”的外衣：-）

我使用的是

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

和storybook

preview head.html

您必须在正文中添加以下内容：

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

此示例可在回购协议中找到

. 它使用旋钮和注释自动生成故事。它也有自定义的主题。希望有帮助。

您找到解决问题的方法了吗？我正试图以类似的方式实现模具

dist

内容，但也无法让组件进行渲染。我正在玩弄模具和引导，需要设置

shadow:false

以获得要应用的样式。如果CSS没有配置为阴影dom，它将找不到它。请从链接中提供必要的详细信息，因为链接可能在将来过期。

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

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