如何在单入口NPM包中兼容Vue和React Hook导入无报错？

问题根源在于当前代码是静态同步导入两个框架的模块，无论用户使用哪个框架，都会加载两个子模块，导致未安装的框架依赖报错。要实现单入口同时支持两个框架且无报错，核心是延迟加载对应框架的模块，仅在用户使用对应Hook时才加载依赖。

具体实现步骤 #

1. 修改入口文件 index.js #

将静态导入改为按需同步加载，利用require的运行时加载特性，结合getter延迟初始化模块：

function loadVueFetch() {
  try {
    const { vueFetch } = require('./composables/vue/vue-fetch');
    return vueFetch;
  } catch (err) {
    throw new Error('vueFetch 依赖 Vue，请先安装 Vue 并确保其在项目中可用');
  }
}

function loadReactFetch() {
  try {
    const { reactFetch } = require('./composables/react/react-fetch');
    return reactFetch;
  } catch (err) {
    throw new Error('reactFetch 依赖 React，请先安装 React 并确保其在项目中可用');
  }
}

// 通过 getter 延迟加载模块，仅当访问对应 Hook 时才执行加载
Object.defineProperty(exports, 'vueFetch', {
  get: loadVueFetch
});

Object.defineProperty(exports, 'reactFetch', {
  get: loadReactFetch
});

2. 配置 package.json 的 peer 依赖 #

将 Vue 和 React 声明为可选 peer 依赖，避免强制用户安装未使用的框架，同时明确版本要求：

{
  "peerDependencies": {
    "vue": "^3.0.0",
    "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
  },
  "peerDependenciesMeta": {
    "vue": {
      "optional": true
    },
    "react": {
      "optional": true
    }
  }
}

3. 子模块保持原有逻辑 #

vue-fetch.js 和 react-fetch.js 无需修改，继续使用各自框架的 API 即可——因为现在只有当用户使用对应 Hook 时，这些模块才会被加载，此时对应框架已经安装，不会出现未定义的错误。

效果说明 #

• Vue 项目中：仅当调用 vueFetch 时，才会加载 Vue 相关模块，React 模块不会被触发加载，因此不会出现 React 未定义的报错。
• React 项目中：仅当调用 reactFetch 时，才会加载 React 相关模块，Vue 模块不会被触发加载，因此不会出现 Vue ref 未定义的报错。

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