Web3js在Vue3组合api项目中导入失败

Question

我用 . 创建了一个全新的项目npm init vite bar -- --template vue。我已经完成了npm install web3，我可以看到我package-lock.json包含这个包。我的node_modules目录还包括web3模块。

然后我将这一行添加到main.js：

import { createApp } from 'vue'
import App from './App.vue'
import Web3 from 'web3'   <-- This line


createApp(App).mount('#app')

我收到以下错误：

我不明白这是怎么回事。我对使用还很陌生npm，所以我不太确定要谷歌什么。错误来自node_modules/web3/lib/index.js、node_modules/web3-core/lib/index.js、node_modules/web3-core-requestmanager/lib/index.js、 最后node_modules/util/util.js。我怀疑这与以下之一有关：

1. 我正在使用Vue 3
2. 我正在使用 Vue 3 组合 API
3. 我正在使用 Vue 3 Composition API SFC<script setup>标签（但我导入了它，main.js所以我不认为是这个）
4. web3js在 Typescript 中，我的 Vue3 项目没有为 Typescript 配置

但由于我对 JavaScript、Vue 和 Web3 相当陌生，我不确定如何将我的谷歌搜索重点放在这个错误上。我的背景是 Python、Go、Terraform。基本上是后端的后端。前端 JavaScript 对我来说是新的。

我该如何解决这个问题？

Answer 1

选项 1：Polyfill 节点全局变量/模块

\n

填充 Node 全局变量和模块使web3导入能够在浏览器中运行：

\n

\n
1. 安装用于填充 Node 全局变量/模块的ESBuild 插件：
\n

\n

npm i -D @esbuild-plugins/node-globals-polyfill\nnpm i -D @esbuild-plugins/node-modules-polyfill\n

\n

\n

2. 配置optimizeDeps.esbuildOptions以使用这些 ESBuild 插件。

   \n
\n

3. 配置define为替换global为globalThis（浏览器等效项）。

   \n
\n

\n

import { defineConfig } from \'vite\'\nimport GlobalsPolyfills from \'@esbuild-plugins/node-globals-polyfill\'\nimport NodeModulesPolyfills from \'@esbuild-plugins/node-modules-polyfill\'\n\nexport default defineConfig({\n  \xe2\x8b\xae\n  optimizeDeps: {\n    esbuildOptions: {\n      2\xef\xb8\x8f\xe2\x83\xa3\n      plugins: [\n        NodeModulesPolyfills(),\n        GlobalsPolyfills({\n          process: true,\n          buffer: true,\n        }),\n      ],\n      3\xef\xb8\x8f\xe2\x83\xa3\n      define: {\n        global: \'globalThis\',\n      },\n    },\n  },\n})\n

\n

演示1

\n

注意：polyfills 给构建输出增加了相当大的大小。

\n

选项 2：使用预捆绑脚本

\n

web3在 处分发捆绑脚本web3/dist/web3.min.js，无需任何配置即可在浏览器中运行（列为“纯js”）。您可以配置 aresolve.alias来拉入该文件：

\n

import { defineConfig } from \'vite\'\n\nexport default defineConfig({\n  \xe2\x8b\xae\n  resolve: {\n    alias: {\n      web3: \'web3/dist/web3.min.js\',\n    },\n\n    // or\n    alias: [\n      {\n        find: \'web3\',\n        replacement: \'web3/dist/web3.min.js\',\n      },\n    ],\n  },\n})\n

\n

演示2

\n

注意：此选项产生的输出比选项 1 小469.4 KiB 。

\n