如何从其他文件动态导入导出的对象？（Stencil.js场景）

为什么fetch不行？ #

fetch是用于发起HTTP请求加载网络资源的工具，而node_modules里的文件属于本地项目依赖，并非通过HTTP服务对外暴露的资源，直接用fetch请求会找不到对应路径，返回状态错误是必然的，这种方式完全不适用于加载本地模块。

可行方案：使用ES动态import()函数 #

ES标准的动态import()函数允许你在代码任意位置异步加载模块，完美适配Stencil.js的组件场景，不需要把import语句局限在文件顶部。具体实现方式如下：

1. 按需加载单个图标（基础版）

在组件的生命周期钩子（比如componentWillLoad）中，根据传入的props动态加载对应图标：

import { Component, Prop, State } from '@stencil/core';

@Component({
  tag: 'custom-icon',
})
export class CustomIcon {
  @Prop() iconName: string; // 外部传入的图标名称props
  @State() currentIcon: any; // 存储加载后的图标对象

  async componentWillLoad() {
    try {
      // 动态导入目标图标包模块
      const iconsModule = await import('your-icon-package-name');
      // 根据props的图标名称取出对应的图标对象
      this.currentIcon = iconsModule[this.iconName];
    } catch (error) {
      console.error(`加载图标 ${this.iconName} 失败:`, error);
    }
  }

  render() {
    // 渲染图标（假设图标是可直接渲染的JSX元素或对象）
    return this.currentIcon ? this.currentIcon : null;
  }
}

2. 预加载全量图标（适合频繁切换场景）

如果需要频繁切换图标，可以一次性预加载整个图标模块，后续直接根据props取对应图标，避免重复发起加载请求：

import { Component, Prop, State, Watch } from '@stencil/core';

@Component({
  tag: 'custom-icon',
})
export class CustomIcon {
  @Prop() iconName: string;
  @State() currentIcon: any;
  private iconsModule: any;

  async componentWillLoad() {
    // 预加载整个图标模块
    this.iconsModule = await import('your-icon-package-name');
    this.updateCurrentIcon(this.iconName);
  }

  @Watch('iconName')
  iconNameChanged(newIconName: string) {
    this.updateCurrentIcon(newIconName);
  }

  private updateCurrentIcon(name: string) {
    this.currentIcon = this.iconsModule?.[name];
  }

  render() {
    return this.currentIcon ? this.currentIcon : null;
  }
}

注意事项 #

• 替换your-icon-package-name为你实际的图标包名称（即node_modules里的目标文件夹名）
• 如果使用TypeScript，建议为图标模块添加类型定义，避免使用any类型
• 动态导入的模块会被Stencil打包为单独的代码块，实现按需加载，不会增加初始包体积

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