当我尝试从 HTML 按钮的 onclick 属性中的捆绑 JavaScript 文件调用函数时，遇到了 ReferenceError。我看到的错误消息是： 未捕获的引用错误：捆绑包未定义
这是我的 HTML 代码的相关部分：
<button id="connectButton" onclick="bundle.connect()">Connect</button>
<button id="executeButton" onclick="bundle.execute()">Execute</button>
以下是我如何使用 Webpack 捆绑 JavaScript：
// webpack.config.js
const path = require('path');
module.exports = {
entry: './index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
const { ethers } = require("ethers");
async function connect() {
if (typeof window.ethereum !== 'undefined') {
await window.ethereum.request({ method: 'eth_requestAccounts' });
}
}
async function execute() {
const contractAdrress = "0x5fbdb2315678afecb367f032d93f642f64180aa3";
const abi = [
{
"inputs": [
{
"internalType": "string",
"name": "_name",
"type": "string"
},
{
"internalType": "uint256",
"name": "_favoriteNumber",
"type": "uint256"
}
],
"name": "addPerson",
"outputs": [],
"stateMutability": "nonpayable",
"type": "function"
},
{
"inputs": [
{
"internalType": "string",
"name": "",
"type": "string"
}
],
"name": "nameToFavoriteNumber",
"outputs": [
{
"internalType": "uint256",
"name": "",
"type": "uint256"
}
],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [
{
"internalType": "uint256",
"name": "",
"type": "uint256"
}
],
"name": "people",
"outputs": [
{
"internalType": "uint256",
"name": "favoriteNumber",
"type": "uint256"
},
{
"internalType": "string",
"name": "name",
"type": "string"
}
],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [],
"name": "retrieve",
"outputs": [
{
"internalType": "uint256",
"name": "",
"type": "uint256"
}
],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [
{
"internalType": "uint256",
"name": "_favoriteNumber",
"type": "uint256"
}
],
"name": "store",
"outputs": [],
"stateMutability": "nonpayable",
"type": "function"
},
];
const provider = new ethers.providers.Web3Provider(window.ethereum);
const signer = provider.getSigner();
const contract = new ethers.Contract(contractAdrress, abi, signer);
await contract.store(42)
}
window.connect = connect;
window.execute= execute;
bundle.js文件生成成功，可以看到其中定义的connect和execute函数。但是，当我单击 HTML 中的按钮时，我收到上面提到的 ReferenceError。
我已经检查了bundle.js 文件是否在HTML 标记中正确链接，并且我已经验证了函数connect 和execute 确实存在于捆绑的JavaScript 文件中。
有人可以帮助我理解为什么会发生此错误以及如何解决它吗？
错误是该函数没有被很好地调用，因为我以这种形式导出它：
window.connect = connect;
window.execute= execute;
所以解决办法是：
<button id="connectButton" onclick="window.connect()">Connect</button>
<button id="executeButton" onclick="window.execute()">Execute</button>
整个 HTML 代码：
<!DOCTYPE html>
<html>
<head>
<title>Javascript Test</title>
</head>
<body>
<button id="connectButton" onclick="window.connect()">Connect</button>
<button id="executeButton" onclick="window.execute()">Execute</button>
</body>
<script src="./dist/bundle.js" type="text/javascript"></script>
</html>
任何想要复制粘贴该代码的人都会很危险，因为在 index.js 中，执行函数的底部还有另一个错误：
const provider = new ethers.providers.Web3Provider(window.ethereum);
为什么错了？ 这根本没有错，因为它仍然可以在 ethers 5.7.2 中工作（我不知道在任何 5.x.x 版本中是否仍然有效）。 解决方案：
npm uninstall ethers
npm i -S [email protected]
最新版本和最推荐的另一个解决方案是该行代码：
const provider = new ethers.BrowserProvider(window.ethereum);