Stencil JS - 如何同时分发一组共享方法

Question

我有一个由 Stencil 编译成 Web 组件的简单组件：

import { Component, h, Prop } from "@stencil/core";
import { IAuthLoginConfig } from "../../interfaces";
import { initAuth } from "../../services";

@Component({
  tag: "login-button",
  styleUrl: "login-button.css",
})
export class LoginButton {
  @Prop() public baseUrl: string = "/oidc/v1/authorize";

  @Prop() public config: IAuthLoginConfig;

  render() {
    return (
      <button onClick={() => initAuth(this.config, this.baseUrl)}>
        Sign in
      </button>
    );
  }
}

在按钮上单击共享函数 initAuth(...) 被调用，这是从服务目录导入的：

import { IAuthLoginConfig } from "../interfaces";

export const initAuth = (authConfig: IAuthLoginConfig, baseUrl: string): void => {
  const url = `${baseUrl}${buildParameters(authConfig)}`;

  window.location.href = url

};

const buildParameters = ({ oauth2, oidc }: IAuthLoginConfig) => {
  return 'some parameters';
};

是否有任何（标准 Stencil）方法也可以构建和发布此文件，以便我们的网络组件库的用户可以导入导出的函数并 use/call 它们？在我们的用例中，最终用户应该能够直接在 his/her 自己的应用程序中使用我们的网络组件中也使用的方法。

其他用例：共享变量，类...

提前致谢！

Answer 1

您必须手动导出您希望在 ./src/index.ts 中访问的每个对象，例如：

export { initAuth } from './services';
// or
export * from './services';

这允许您将其导入到使用项目中：

import { initAuth } from 'your-installed-package';
// or (depending on how you published)
import { initAuth } from 'your-installed-package/dist';