Next.js环境下根据运行环境动态导入模块的实现问题

核心问题分析 #

你遇到的本质问题是：Webpack 等打包工具会在构建阶段解析所有模块依赖，即便这些依赖被包裹在条件判断里。当构建客户端/边缘环境包时，工具仍会尝试处理依赖 node:crypto 的 node.ts，从而抛出不支持 node: 协议的错误。

推荐方案：使用条件导出（Conditional Exports） #

这是最标准且兼容所有现代打包工具的方案，无需编写复杂的条件判断代码，让环境自动选择正确的模块。

步骤1：提取公共类型定义 #

创建 types.ts 文件统一管理接口类型，避免重复定义：

// src/lib/crypto/types.ts
export type CryptoBox = {
  hash: (data: string, salt: string, ...moreSalt: string[]) => Promise<string>;
  random: (range: bigint) => bigint;
};

步骤2：配置条件导出 #

在 src/lib/crypto 目录下创建 package.json，定义不同环境对应的模块入口：

{
  "name": "@your-project/crypto",
  "exports": {
    ".": {
      "node": "./node.ts",
      "browser": "./web.ts",
      "worker": "./web.ts",
      "default": "./web.ts"
    }
  }
}

步骤3：简化入口模块 #

修改 dyna.ts 为简单的重导出，让条件导出机制自动处理环境判断：

// src/lib/crypto/dyna.ts
export * from './';

步骤4：配置 TypeScript 支持条件导出 #

更新 tsconfig.json 启用 Node.js 16+ 的模块解析规则：

{
  "compilerOptions": {
    "moduleResolution": "node16",
    "module": "ESNext",
    // 保留其他原有配置
  }
}

替代方案：Webpack 专属配置（不推荐，仅作兼容参考） #

如果无法使用条件导出，可以通过 Webpack 配置强制忽略 Node.js 专属模块：

修改 dyna.ts #

import type { CryptoBox } from './types';

let box: CryptoBox;

// 仅在 Node.js 环境加载 node.ts
if (typeof process !== 'undefined' && process.release?.name === 'node') {
  box = require('./node').default;
} else {
  box = require('./web').default;
}

export const hash = box.hash;
export const random = box.random;

配置 Webpack #

在 Webpack 配置文件中添加规则，构建客户端包时将 node.ts 替换为 web.ts：

const webpack = require('webpack');

module.exports = {
  resolve: {
    alias: {
      // 浏览器环境下将 ./node 映射为 ./web
      './node': './web'
    }
  },
  plugins: [
    // 忽略 node:crypto 模块在浏览器构建中的解析
    new webpack.IgnorePlugin({
      resourceRegExp: /node:crypto/,
      contextRegExp: /node\.ts$/
    })
  ]
};

为什么之前的尝试失败？ #

• Webpack 会在构建阶段解析所有静态依赖，即便代码包裹在 if(false) 这样的条件中，仍会尝试加载模块文件
• require 和动态 import() 都会触发 Webpack 的依赖解析，除非通过配置明确排除

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