如何在 webpack 5 中 polyfill node 核心模块

在本教程中，你将学习如何使用 react-app-rewired 包，在 webpack 5 及以上版本中 polyfill node 核心模块，包括安装所需依赖以及重写默认的 webpack 配置。

polyfill node 核心模块报错的原因是什么？

在 webpack 最新一次更新到 ___ 版本之前，webpack < 5 默认是包含 NodeJS polyfill 的。由于当前版本的 webpack不再默认包含 NodeJS polyfill，这导致使用 create-react-app 搭配 webpack > 5 构建应用，并使用 web3.js 和 alchemyweb3.js library 的开发者遇到了问题。

polyfill node 核心模块报错的样子如下：

4 个简单步骤，修复 webpack 5 中的 polyfill node 核心模块问题

create-react-app 和 polyfill 报错的主要问题在于，create-react-app 默认将 webpack 配置文件隐藏在 node-modules 中，并在构建时生成该文件，导致开发者无法对其进行修改。

好在有一个包，react-app-rewired，可以让开发者轻松编辑 webpack 配置文件，修复 polyfill node 核心模块报错。

1. 安装 react-app-rewired

首先，使用你偏好的包管理器安装 reach-app-rewired 包。

使用 yarn 安装 react-app-rewired 包：

使用 npm 安装 react-app-rewired 包：

2. 安装缺失的依赖

接下来，安装以下缺失的依赖：

• crypto-browserify
• stream-browserify
• assert
• stream-http
• https-browserify
• os-browserify
• url

使用 yarn 安装缺失的依赖：

yarn add process crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer

使用 npm 安装缺失的依赖：

3. 重写 create-react-app 的 webpack 配置文件

在项目的根目录下，新建一个名为 config-overrides.js 的文件，并添加以下代码：

这段 config-overrides.js 代码片段告诉 webpack 如何解析支持 web3 库和钱包提供方在浏览器中运行所需的缺失依赖。

4. 重写 package.json 以包含 webpack 配置

在 package.json 文件中，将以下三个 scripts 字段中的 react-scripts 替换为 react-app-rewired，以更新 webpack 配置：

• start
• build
• test

以下是替换 react-scripts 之前的 package.json 文件：

以下是将 react-scripts 替换为 react-app-rewired 脚本之后的 package.json 文件：

就是这样！

现在，polyfill node 核心模块的报错应该已被修复，缺失的 NodeJS polyfill 应该已被包含进你的应用中，并且你的应用应该可以正常配合 web3.js 和 Alchemyweb3.js library 使用了。