如何在反应中使用 webpack 和 web3？

Question

你好，我刚刚从 skratch 开始了一个新的反应应用程序。 我按照https://medium.com/age-of-awareness/setup-react-with-webpack-and-babel-5114a14a47e9 上的说明进行操作，这是我的 package.json 文件

{
  "name": "html2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack serve --mode development",
    "build": "webpack --mode production"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "@babel/core": "^7.15.5",
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    "@babel/preset-env": "^7.15.6",
    "@babel/preset-react": "^7.14.5",
    "babel-loader": "^8.2.2",
    "compression-webpack-plugin": "^9.0.0",
    "html-webpack-plugin": "^5.3.2",
    "webpack": "^5.56.0",
    "webpack-cli": "^4.8.0",
    "webpack-dev-server": "^4.3.0"
  }
}

一切顺利，运行并构建，直到我尝试添加 web3 包。 我用

npm install web3 --save-dev

安装包，我将它引用到我的 index.js 文件中

import Web3 from "web3";

之后，如果我尝试运行或构建，我会遇到很多错误：

ERROR in ./node_modules/cipher-base/index.js 2:16-43
Module not found: Error: Can't resolve 'stream' in 'C:\developer\RFT\html2\node_modules\cipher-base'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
        - install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "stream": false }
 @ ./node_modules/create-hash/browser.js 6:11-33
 @ ./node_modules/ethereumjs-util/dist.browser/hash.js 24:17-39
 @ ./node_modules/ethereumjs-util/dist.browser/index.js 30:13-30
 @ ./node_modules/web3-utils/lib/utils.js 25:21-47
 @ ./node_modules/web3-utils/lib/index.js 24:12-33
 @ ./node_modules/web3/lib/index.js 35:12-33
 @ ./src/index.js 3:0-24

ERROR in ./node_modules/eth-lib/lib/bytes.js 9:193-227
Module not found: Error: Can't resolve 'crypto' in 'C:\developer\RFT\html2\node_modules\eth-lib\lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }'
        - install 'crypto-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "crypto": false }
 @ ./node_modules/swarm-js/lib/api-browser.js 32:12-40
 @ ./node_modules/web3-bzz/lib/index.js 23:12-31
 @ ./node_modules/web3/lib/index.js 34:10-29
 @ ./src/index.js 3:0-24

ERROR in ./node_modules/ethereumjs-util/dist.browser/account.js 42:31-48
Module not found: Error: Can't resolve 'assert' in 'C:\developer\RFT\html2\node_modules\ethereumjs-util\dist.browser'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "assert": require.resolve("assert/") }'
        - install 'assert'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "assert": false }
 @ ./node_modules/ethereumjs-util/dist.browser/index.js 22:13-33
 @ ./node_modules/web3-utils/lib/utils.js 25:21-47
 @ ./node_modules/web3-utils/lib/index.js 24:12-33
 @ ./node_modules/web3/lib/index.js 35:12-33
 @ ./src/index.js 3:0-24

ERROR in ./node_modules/ethereumjs-util/dist.browser/address.js 7:31-48
Module not found: Error: Can't resolve 'assert' in 'C:\developer\RFT\html2\node_modules\ethereumjs-util\dist.browser'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "assert": require.resolve("assert/") }'
        - install 'assert'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "assert": false }
 @ ./node_modules/ethereumjs-util/dist.browser/index.js 26:13-33
 @ ./node_modules/web3-utils/lib/utils.js 25:21-47
 @ ./node_modules/web3-utils/lib/index.js 24:12-33
 @ ./node_modules/web3/lib/index.js 35:12-33
 @ ./src/index.js 3:0-24

ERROR in ./node_modules/ethereumjs-util/dist.browser/object.js 26:31-48
Module not found: Error: Can't resolve 'assert' in 'C:\developer\RFT\html2\node_modules\ethereumjs-util\dist.browser'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "assert": require.resolve("assert/") }'
        - install 'assert'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "assert": false }
 @ ./node_modules/ethereumjs-util/dist.browser/index.js 42:13-32
 @ ./node_modules/web3-utils/lib/utils.js 25:21-47
 @ ./node_modules/web3-utils/lib/index.js 24:12-33
 @ ./node_modules/web3/lib/index.js 35:12-33
 @ ./src/index.js 3:0-24

ERROR in ./node_modules/web3-eth-accounts/lib/index.js 26:76-93
Module not found: Error: Can't resolve 'crypto' in 'C:\developer\RFT\html2\node_modules\web3-eth-accounts\lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }'
        - install 'crypto-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "crypto": false }
 @ ./node_modules/web3-eth/lib/index.js 33:15-43
 @ ./node_modules/web3/lib/index.js 30:10-29
 @ ./src/index.js 3:0-24

ERROR in ./node_modules/web3-eth-accounts/node_modules/eth-lib/lib/bytes.js 7:193-227
Module not found: Error: Can't resolve 'crypto' in 'C:\developer\RFT\html2\node_modules\web3-eth-accounts\node_modules\eth-lib\lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }'
        - install 'crypto-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "crypto": false }
 @ ./node_modules/web3-eth-accounts/node_modules/eth-lib/lib/account.js 1:14-32
 @ ./node_modules/web3-eth-accounts/lib/index.js 25:14-44
 @ ./node_modules/web3-eth/lib/index.js 33:15-43
 @ ./node_modules/web3/lib/index.js 30:10-29
 @ ./src/index.js 3:0-24

ERROR in ./node_modules/web3-providers-http/lib/index.js 26:11-26
Module not found: Error: Can't resolve 'http' in 'C:\developer\RFT\html2\node_modules\web3-providers-http\lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "http": require.resolve("stream-http") }'
        - install 'stream-http'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "http": false }
 @ ./node_modules/web3-core-requestmanager/lib/index.js 45:18-48
 @ ./node_modules/web3-core/lib/index.js 22:23-58
 @ ./node_modules/web3/lib/index.js 29:11-31
 @ ./src/index.js 3:0-24

ERROR in ./node_modules/web3-providers-http/lib/index.js 27:12-28
Module not found: Error: Can't resolve 'https' in 'C:\developer\RFT\html2\node_modules\web3-providers-http\lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "https": require.resolve("https-browserify") }'
        - install 'https-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "https": false }
 @ ./node_modules/web3-core-requestmanager/lib/index.js 45:18-48
 @ ./node_modules/web3-core/lib/index.js 22:23-58
 @ ./node_modules/web3/lib/index.js 29:11-31
 @ ./src/index.js 3:0-24

ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js 21:11-26
Module not found: Error: Can't resolve 'http' in 'C:\developer\RFT\html2\node_modules\xhr2-cookies\dist'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "http": require.resolve("stream-http") }'
        - install 'stream-http'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "http": false }
 @ ./node_modules/xhr2-cookies/dist/index.js 6:9-38
 @ ./node_modules/web3-providers-http/lib/index.js 25:11-49
 @ ./node_modules/web3-core-requestmanager/lib/index.js 45:18-48
 @ ./node_modules/web3-core/lib/index.js 22:23-58
 @ ./node_modules/web3/lib/index.js 29:11-31
 @ ./src/index.js 3:0-24

ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js 22:12-28
Module not found: Error: Can't resolve 'https' in 'C:\developer\RFT\html2\node_modules\xhr2-cookies\dist'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "https": require.resolve("https-browserify") }'
        - install 'https-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "https": false }
 @ ./node_modules/xhr2-cookies/dist/index.js 6:9-38
 @ ./node_modules/web3-providers-http/lib/index.js 25:11-49
 @ ./node_modules/web3-core-requestmanager/lib/index.js 45:18-48
 @ ./node_modules/web3-core/lib/index.js 22:23-58
 @ ./node_modules/web3/lib/index.js 29:11-31
 @ ./src/index.js 3:0-24

ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js 23:9-22
Module not found: Error: Can't resolve 'os' in 'C:\developer\RFT\html2\node_modules\xhr2-cookies\dist'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "os": require.resolve("os-browserify/browser") }'
        - install 'os-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "os": false }
 @ ./node_modules/xhr2-cookies/dist/index.js 6:9-38
 @ ./node_modules/web3-providers-http/lib/index.js 25:11-49
 @ ./node_modules/web3-core-requestmanager/lib/index.js 45:18-48
 @ ./node_modules/web3-core/lib/index.js 22:23-58
 @ ./node_modules/web3/lib/index.js 29:11-31
 @ ./src/index.js 3:0-24

12 errors have detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

webpack 5.56.0 compiled with 12 errors in 14277 ms

发生了什么？ 我正在尝试使用这个解决方案，因为我的原始项目是在没有 webpack 的情况下反应（我认为 browserfy）并且一切正常，但我认为块（即使拆分）非常大（在某些情况下超过 3MB）。 我无法优化它，我想到了 webpack。 这样对吗？

谢谢

Answer 1

问题是webpack不再为您解析 这里列出的节点核心模块。 基本上有 2 个选项可以解决与您使用的特定软件包相关的问题web3 ：

• 选项#1：这只是使用已经为位于dist/web3.min.js web构建的直接版本。 那么然后将您的导入切换到：

import Web3 from "web3/dist/web3.min";

但是，如果您的代码是Typescript ，这种方式最终可能会出现打字问题。

• 选项#2：这种方式与他们在第 1 步中构建web3.min.js的方式相同，但它发生在您的webpack5 。 为了解决节点核心模块，您可以添加上面的fallback列表并安装它们需要的包，或者使用this one让生活更轻松。 请记住，不要将node_modules从 JS 代码的加载器中排除（ babel-loader始终是一个常见的加载器）。 这是草案：

// webpack.config.js
{
  // ...
  plugins: [
    new NodePolyfillPlugin({
      excludeAliases: ["console"]
    }),
  ]
  // ...
}