如何强制StencilJS导出枚举以供常规JavaScript代码使用？

我之前做Stencil组件库的时候刚好遇到过一模一样的问题——默认只导出组件类，自定义的枚举、工具类这些都不会被打包到输出的JS模块里，没法给普通JS代码调用。这里给你几个亲测有效的办法：

方法1：独立文件+入口手动导出（推荐） #

把枚举单独放在一个独立的TS文件里，然后在组件库的入口文件中手动导出它，让Stencil打包时把它包含到输出模块中：

• 新建src/utils/view-type.ts文件，定义你的枚举：

  export enum ViewType { 
    daily = 0, 
    weekly = 1, 
    monthly = 2, 
    yearly = 3 
  }
  

• 在项目根目录的src/index.ts（如果没有就新建一个）里，同时导出组件和枚举：

  // 导出组件类（保持你原来的导出）
  export { Calendar, CalendarDailyView, CalendarMonthlyView, CalendarWeeklyView, CalendarYearlyView };
  // 导出枚举
  export { ViewType } from './utils/view-type';
  

这样打包后的JS文件就会把ViewType作为模块导出成员，普通JS代码就能通过import { ViewType } from './your-library-path.js'来调用，比如console.log(ViewType.daily)。

方法2：组件文件内手动导出枚举对象 #

如果不想拆分文件，也可以在组件TS文件里，额外导出枚举对应的JS对象（因为TS编译枚举后会生成一个可访问的JS对象）：

// 原有的枚举定义
export enum ViewType { 
  daily = 0, 
  weekly = 1, 
  monthly = 2, 
  yearly = 3 
}

// 手动导出这个枚举的JS对象，确保Stencil不会忽略它
export const ViewType = ViewType;

然后同样在src/index.ts里把ViewType导出，普通JS就能通过导入拿到这个对象，使用方式和TS里一致。

方法3：调整Stencil配置确保非组件导出被保留 #

如果你的项目用了UMD格式输出（方便全局调用），可以修改stencil.config.ts的outputTargets配置，开启全局命名空间，并确保枚举被挂载到全局对象上：

export const config: Config = {
  namespace: 'your-library-name',
  outputTargets: [
    {
      type: 'dist',
      esmLoaderPath: '../loader',
    },
    {
      type: 'dist-custom-elements',
    },
    {
      type: 'docs-readme',
    },
    {
      type: 'www',
      serviceWorker: null, // disable service workers
    },
    // 添加UMD输出配置
    {
      type: 'dist-umd',
      globals: {
        'your-library-name': 'YourLibraryName'
      }
    }
  ],
};

这样打包后，枚举会被挂载到window.YourLibraryName.ViewType上，普通JS代码不用导入就能直接调用。

以上三种方法里，我最推荐第一种，因为它能让代码结构更清晰，后续维护枚举或者添加其他工具类也更方便。

内容的提问来源于stack exchange，提问作者MWKZ