如何在node项目的HTML页面引入web3库实现与智能合约交互

• 你遇到的require is not defined报错是因为require是Node.js服务端专属的CommonJS模块化语法，assets/js/main.js运行在用户浏览器环境，原生不支持该语法
• 服务端index.js和前端main.js运行在完全隔离的两个环境，无法直接共享web3实例，所有需要用户钱包授权的写合约操作必须在前端代码中完成，服务端无法代劳

步骤1：引入浏览器可用的web3包 #

你已经通过npm安装了web3，直接从项目依赖中复制浏览器适配的编译文件到静态资源目录：

• 找到node_modules/web3/dist/web3.min.js文件，复制到assets/js/目录下
• 在main.html的</body>标签前引入该文件：

<script src="/js/web3.min.js"></script>
<script src="/js/main.js"></script>

步骤2：修改main.js代码 #

删除原代码中的require相关语句，修正已废弃的钱包调用方法，修改后的代码如下：

// 已经通过script标签引入了全局Web3对象，不需要再require
const web3 = new Web3("http://localhost:7545");
const ethEnabled = async () => {
  if (window.ethereum) {
    // 原send方法已废弃，替换为标准的request调用
    await window.ethereum.request({method: 'eth_requestAccounts'});
    window.web3 = new Web3(window.ethereum);
    console.log("Connected to web3");
    return true;
  }
  alert("Error - could not connect via web3.js");
  return false;
}

// 后续绑定表单提交按钮的点击事件，调用合约写方法即可

可以引入前端打包工具处理代码：

• 安装webpack/vite等前端打包工具，将main.js作为入口文件编译
• 编译后的打包产物输出到assets目录，express静态资源服务直接引入打包后的文件即可

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