如何让跨Node服务端与React前端的库适配不同来源的randomUUID？

核心思路：运行时检测 + 可选条件导出 #

在TypeScript+Node/浏览器的技术栈中，不需要依赖工具的特殊条件导入，直接通过运行时环境判断选择对应环境的randomUUID实现即可，同时结合TypeScript类型保证兼容性。

1. 基础运行时检测实现 #

创建库核心模块uuid.ts：

// 备选UUID生成方案（UUID v4）
function fallbackRandomUUID(): string {
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
    const r = Math.random() * 16 | 0;
    const v = c === 'x' ? r : (r & 0x3 | 0x8);
    return v.toString(16);
  });
}

export function randomUUID(): string {
  // Node.js环境：使用内置crypto模块
  if (typeof process !== 'undefined' && process.release?.name === 'node') {
    const { randomUUID: nodeUUID } = require('crypto');
    return nodeUUID();
  }
  // 浏览器环境：使用全局crypto对象
  else if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
    return crypto.randomUUID();
  }
  // 兜底方案
  else {
    return fallbackRandomUUID();
  }
}

2. TypeScript类型配置 #

避免类型报错，在库的tsconfig.json中添加必要的类型支持：

{
  "compilerOptions": {
    "lib": ["ES2020", "DOM"],
    "types": ["node"]
  }
}

如果库要发布，将@types/node添加为开发依赖即可。

3. pnpm的角色说明 #

pnpm作为包管理工具，不需要额外配置来支持这种跨环境逻辑。如果备选方案依赖第三方包（如crypto-js），直接在package.json中声明依赖，pnpm会正常处理不同环境的安装流程。

4. 进阶：ESM条件导出优化 #

如果库采用ESM格式，可利用Node.js的条件导出功能，在package.json中声明不同环境的入口：

{
  "exports": {
    ".": {
      "node": "./dist/node-uuid.js",
      "browser": "./dist/browser-uuid.js",
      "default": "./dist/fallback-uuid.js"
    }
  }
}

然后分环境编写实现：

• node-uuid.ts：直接导出import { randomUUID } from 'crypto';
• browser-uuid.ts：直接导出export const randomUUID = crypto.randomUUID.bind(crypto);
• fallback-uuid.ts：导出兜底的fallbackRandomUUID

这种方式更高效，打包工具（Vite、Webpack等）会自动根据环境选择对应入口。

5. 项目适配验证 #

• React前端项目（如Vite构建）会自动识别browser入口，使用浏览器原生的crypto.randomUUID
• NestJS服务端会直接使用Node.js的crypto模块实现

内容的提问来源于stack exchange，提问作者A Question Asker