Stencil JS 如何随Web组件库一同发布共享方法、类及变量？

Stencil 有原生支持的标准方案可以满足你的需求，按以下步骤配置即可：

1. 配置公共导出入口
   Stencil 约定使用src/index.ts作为对外暴露公共 API 的统一入口，所有你希望使用者能访问的函数、类、变量、TS 类型都可以在这个文件中主动导出。示例如下：

// src/index.ts
// 导出公共方法
export { initAuth } from './services/auth.service';
// 导出公共TS类型
export type { IAuthLoginConfig } from './interfaces/auth.interface';
// 其他需要对外暴露的变量、类都可以在此处添加导出规则

2. 确认构建输出配置
   你只需要在stencil.config.ts中保留默认的dist类型输出目标即可，Stencil 构建时会自动把src/index.ts的导出内容整合到最终发布的 dist 包中，同时生成对应的类型声明文件。参考配置：

// stencil.config.ts
import { Config } from '@stencil/core';

export const config: Config = {
  namespace: '你的组件库命名空间',
  outputTargets: [
    {
      type: 'dist',
      esmLoaderPath: '../loader'
    },
    // 其他输出目标如dist-custom-elements等不影响公共导出逻辑，可以保留
  ]
};

3. 使用者调用方式
   用户安装你的组件库包后，可以直接从包名导入对应的公共资源调用，示例如下：

import { initAuth, IAuthLoginConfig } from '你的组件库包名';

// 直接调用公共方法
const config: IAuthLoginConfig = {
  // 业务配置
};
initAuth(config, '/custom/oidc/authorize');

注意事项 #

• 不需要对外暴露的内部逻辑（比如你示例中的buildParameters方法）不要在src/index.ts中导出，即可保证内部逻辑不被外部访问，符合封装要求。
• 如果是 TS 类型的导出，推荐使用export type语法，避免打包生成冗余的 JS 代码。

内容的提问来源于stack exchange，提问作者Jeroen De Groote