将 stenciljs Web 组件集成到 stenciljs 应用程序中

【问题标题】：Integrate a stenciljs web component into a stenciljs app将 stenciljs Web 组件集成到 stenciljs 应用程序中
【发布时间】：2019-03-07 13:22:00
【问题描述】：

我确实使用模板构建了一些 Web 组件并将它们发布在 npm 上。现在我想将它们集成到另一个模板应用程序中，但我找不到任何建议，或者我到目前为止发现的建议不起作用。

例如模板配置上不再有 collections 属性来包含外部组件，而我在官方文档中发现分发组件的这个属性不起作用：

在 stencil-app-starter 应用中运行 npm install my-name --save 向 npm 包添加导入：import my-component; 然后你可以在模板、JSX、html 等的任何地方使用该元素。

我知道这些组件可以正常工作，因为我已经成功地将它们集成到 Angular 和 React 应用程序中。

提前感谢您的帮助:)

【问题讨论】：

【解决方案1】：

我遇到了同样的问题，刚刚解决了。我正在构建一个 StencilJS 应用程序并尝试使用我的组件库@elgervb/stencil-components。以下是我为使其正常工作所做的工作：

我已经添加了我的库：

yarn add @elgervb/stencil-components

在tsconfig.json 中，我将typeRoots 添加到compilerOptions 以加载我的类型：

"typeRoots": [
  "node_modules/@elgervb"
]

之后我可以在我的应用中使用我的所有组件：

<evb-filepicker accept="image/*">
  <evb-button>Pick image</evb-button>
</evb-filepicker>

希望这会有所帮助:-)

【讨论】：