Блог

У меня есть этот простой компонент, который скомпилирован в веб-компонент по трафарету:

 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 (  lt;button onClick={() =gt; initAuth(this.config, this.baseUrl)}gt;  Sign in  lt;/buttongt;  );  } }  

При нажатии на кнопку вызывается общая функция initAuth(...) , которая импортируется из каталога служб:

 import { IAuthLoginConfig } from "../interfaces";  export const initAuth = (authConfig: IAuthLoginConfig, baseUrl: string): void =gt; {  const url = `${baseUrl}${buildParameters(authConfig)}`;   window.location.href = url  };  const buildParameters = ({ oauth2, oidc }: IAuthLoginConfig) =gt; {  return 'some parameters'; };  

Существует ли какой-либо (стандартный трафарет) способ также создать и опубликовать этот файл, чтобы пользователь нашей библиотеки веб-компонентов мог импортировать экспортированные функции и использовать/вызывать их? В нашем случае конечный пользователь должен иметь возможность напрямую использовать методы в своем собственном приложении, которые также используются в наших веб-компонентах.

Другие варианты использования: общие переменные, классы…

Заранее спасибо!

Вам придется вручную экспортировать каждый объект , к которому вы хотите получить доступ ./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';