如何让Rollup适配浏览器环境下的Node.js类库？

开发者阿泽

2026-8-14

Rollup构建React项目遇"crypto"模块解析失败的解决办法

问题说明

使用依赖uuid或crypto生成随机ID的React布局库，经Rollup打包后在浏览器运行时出现以下错误：

Uncaught TypeError: Failed to resolve module specifier "crypto". Relative references must start with either "/", "./", or "../".

可行的适配方案

1. 配置Rollup的Node模块polyfill

先安装所需依赖：

npm install @rollup/plugin-node-resolve @rollup/plugin-commonjs rollup-plugin-polyfill-node --save-dev

修改rollup.config.js，添加polyfill和模块解析配置：

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import polyfillNode from 'rollup-plugin-polyfill-node';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'esm',
    sourcemap: true
  },
  plugins: [
    polyfillNode({ include: ['crypto'] }), // 仅针对crypto做polyfill，减少打包体积
    resolve({
      browser: true, // 优先解析浏览器环境适配的模块版本
      preferBuiltins: false // 禁用Node.js内置模块的默认解析逻辑
    }),
    commonjs()
  ]
};

2. 替换为浏览器兼容的uuid版本

如果项目直接依赖uuid库，换用浏览器适配版本：

卸载原uuid：
```
npm uninstall uuid
```
安装浏览器兼容版：
```
npm install uuid-browser --save
```

修改代码中的导入路径：

// 注释原导入
// import { v4 as uuidv4 } from 'uuid';
// 替换为
import { v4 as uuidv4 } from 'uuid-browser';

3. 手动添加crypto简易polyfill

在项目入口文件（如src/index.js）顶部添加代码，为浏览器补全基础的crypto实现：

if (!window.crypto) {
  window.crypto = {
    getRandomValues: (array) => {
      for (let i = 0; i < array.length; i++) {
        array[i] = Math.floor(Math.random() * 256);
      }
      return array;
    }
  };
}

注意：此方案仅适配随机数生成的基础需求，若布局库依赖crypto的高级API，需使用crypto-browserify这类完整polyfill。