0

我有一个由 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）方法来构建和发布此文件，以便我们的 Web 组件库的用户可以导入导出的函数并使用/调用它们？在我们的用例中，最终用户应该能够直接在他/她自己的应用程序中使用方法，这些方法也用于我们的 Web 组件。

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

提前致谢！

4

1 回答 1

3

您必须手动导出要在 中访问的每个对象./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';
于 2021-12-01T12:29:50.533 回答