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

Question

我正在尝试将Stencil和Storybook整合到同一个项目中.我一直在关注这个设置向导和这一个但是的步骤之一是组件库中发布到NPM和这不是我想要的.

我有这个我用组件库(文件夹)配置的repo,src以及那些带有Storybook的组件的审阅者,它位于该storybook文件夹中.

问题是,当我使用模板编译组件和复制dist文件夹中的故事书应用程序内并导入组件没有渲染.使用自定义头标签调整配置我能够正确导入它,但是没有应用任何样式.

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

因此,组件存在于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"
  },

工作流程如下:

1. 发布故事书
2. 在组件中进行更改
3. 执行构建命令
4. 执行复制命令

此外,我想自动化开发人员的体验,但我先解决了这个问题.

我可能做错什么的想法？

Answer 1

\n

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

\n

\n\n

我对这些指南的阅读是，他们指出 \xe2\x80\x9cpublish 到 NPM\xe2\x80\x9d 作为将文件放在已知 URL 的一种方式，这将最容易进行部署。

\n\n

如果不这样做，您将需要找出不同的部署策略。如何获取构建产品 \xe2\x80\x93 目录dist以及static文件 \xe2\x80\x93 ，以便您的 HTML 能够在已知 URL 引用它？通过选择偏离准则，这就是您必须手动解决的问题。

\n\n

这不是一个无法克服的问题，但没有一个通用的解决方案。您选择（出于您自己的原因）拒绝操作指南提供的解决方案，这意味着您接受 \xe2\x80\x9c 的衣钵，我知道我想要什么\xe2\x80\x9d :-)

\n