如何从Node.js包正确导出SVG？UI套件资源引用失败排查

问题分析 #

你的问题出在package.json的exports字段通配符匹配规则上：当前配置的./static/*仅能匹配static目录下的直接子文件/目录，而你实际导入的是多级嵌套路径（比如static/svg/icon/test.svg），这种情况下单一通配符无法覆盖深层资源，导致模块查找失败。

正确配置方案 #

Node.js的exports支持**递归通配符来匹配多级路径，你需要修改package.json的exports配置：

{
  "exports": {
    ".": "./src",
    "./static/**": "./src/static/**"
  }
}

这里用./static/**替代./static/*，**会匹配static目录下所有层级的文件和子目录，不管嵌套深度。

验证导入路径 #

修改配置后，你之前的导入方式就能正常工作：

import test from "ui/static/svg/icon/test.svg";

额外注意事项 #

• 若使用TS项目，需在tsconfig.json对应的类型声明文件中添加静态资源的类型定义，避免类型报错：

  // src/types/svg.d.ts
  declare module "*.svg" {
    const content: string;
    export default content;
  }
  

• 若要发布包到npm，需在package.json的files字段中明确包含static目录，确保资源被打包进发布包：

  {
    "files": ["src"] // 或直接指定"src/static"
  }
  

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