从另一个 Stencil JS 库导入 Stencil JS 库 [英] Import Stencil JS library from another Stencil JS library

问题描述

我有两个 Stencil JS Web 组件库，library-a 和 library-b.这些不是应用程序，只是单独的 npm 组件包.

I have two libraries of Stencil JS web components, library-a and library-b. These are not apps, just separate npm packages of components.

我想在 library-b 中使用 library-a 中的一些组件.如何将组件从 A 导入 B?

I would like to use some of the components from library-a inside library-b. How do I import components from A into B?

StencilJS 文档提供了一些导入说明，但未涵盖此特定用例.

The StencilJS docs offer some import instructions but don't cover this particular use case.

推荐答案

基本上你所要做的就是npm install(或npm link)项目并导入它.

Basically all you have to do is npm install (or npm link) the project and import it.

据我所知，有两个地方可以包含导入:

As far as I know there are two places you can include the import:

1. 在 stencil.config.ts 中配置为 globalScript 的全局 app.ts 内部.
2. 在根组件内部.

1. Inside a global app.ts which is configured as a globalScript in stencil.config.ts.
2. Inside the root component.

在您的情况下，第二个选项可能不起作用，因为组件库通常没有根组件.

In your case the second option probably won't work since component libraries usually don't have a root component.

导入app.ts:

首先，创建一个 全局脚本 并在您的 stencil.config 中进行配置.ts:

First, create a global script and configure it in your stencil.config.ts:

export const config: Config = {
  // ...
  globalScript: 'src/global/app.ts',
};

然后在该文件中添加导入.离子框架示例:

Then add the import inside that file. Example for Ionic Framework:

import '@ionic/core';

现在您可以像使用任何其他 HTML 元素一样使用这些组件.

Now you can use the components just like any other HTML element.

这篇关于从另一个 Stencil JS 库导入 Stencil JS 库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！