如何从自定义npm包内访问宿主项目根目录下的src/assets/svg文件夹

根据你的使用场景不同，可选择对应的实现方案：

1. Node.js 环境适用（包为工具/脚本类） #

核心利用Node进程的工作目录特性定位宿主根目录：

• Node 中 process.cwd() 会返回启动Node进程时的工作目录，绝大多数场景下就是宿主项目的根目录，直接拼接目标路径即可
• 示例代码：

const path = require('path');
// 拼接得到svg目录的绝对路径
const targetSvgDir = path.resolve(process.cwd(), 'src/assets/svg');

• 注意：该方案仅适用于Node运行时，比如你开发的是脚手架、构建脚本类npm包，浏览器端运行的前端包无文件系统权限，无法使用该方案

2. 前端环境适用（包为前端组件/运行时类） #

浏览器端没有本地文件系统访问能力，需要在构建阶段处理资源引用：

• 方案A：配置项传参
  你可以在包的初始化方法中开放配置项，要求宿主传入svg目录的访问路径，宿主侧的构建工具（Webpack/Vite等）会自动处理路径的资源映射
  宿主侧使用示例：

  import initSvgUtil from 'my-npm-package';
  // 传入svg目录的访问路径
  initSvgUtil({
    svgBasePath: '/src/assets/svg/'
  })
  

  你在包内直接用传入的路径拼接对应svg文件名，即可正常加载资源。
• 方案B：配套构建插件扫描
  你可以同步开发对应构建工具的插件（Vite插件/Webpack Loader），在构建钩子中直接读取宿主的目标目录资源：
  Vite插件示例：

  import path from 'path';
  import fs from 'fs/promises';
  
  export default function mySvgPlugin() {
    return {
      name: 'my-npm-package-svg-plugin',
      async configResolved(config) {
        // config.root为宿主项目根目录
        const svgDir = path.resolve(config.root, 'src/assets/svg');
        const svgFileList = await fs.readdir(svgDir);
        // 可将svg资源处理后注入到构建产物，供前端运行时直接调用
      }
    }
  }
  

3. 兼容兜底逻辑 #

可以在包内增加路径存在性校验，不存在时抛出明确的错误提示引导用户处理：

const fs = require('fs');
function getSvgDir(customPath) {
  const targetDir = customPath || path.resolve(process.cwd(), 'src/assets/svg');
  if (!fs.existsSync(targetDir)) {
    throw new Error('未找到svg目录，请确认项目根目录下存在src/assets/svg，或通过customPath参数指定正确路径');
  }
  return targetDir;
}

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