调用打包JS函数时出现Uncaught ReferenceError: bundle未定义求助

在HTML按钮的onclick属性中调用Webpack打包后的JS文件内的函数时，出现Uncaught ReferenceError: bundle is not defined错误。

相关HTML代码：

<button id="connectButton" onclick="bundle.connect()">Connect</button>
<button id="executeButton" onclick="bundle.execute()">Execute</button>

Webpack配置代码：

// webpack.config.js
const path = require('path');

module.exports = {
    entry: './index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
};

业务JavaScript代码：

// index.js
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生成正常并正确引入HTML，且打包后的文件中存在connect和execute函数，但点击按钮仍报错。

错误原因 #

你在HTML中尝试通过bundle.connect()调用函数，但全局作用域中并没有定义名为bundle的对象。你的代码是把connect和execute函数直接挂载到了window对象上，而非window.bundle。

解决方法 #

有两种可行的解决方案：

方案一：修改HTML调用逻辑 #

直接调用挂载在window上的函数，去掉bundle.前缀：

<button id="connectButton" onclick="connect()">Connect</button>
<button id="executeButton" onclick="execute()">Execute</button>

方案二：调整JS代码的挂载方式 #

如果希望保留HTML中的bundle.connect()调用方式，需要修改JS代码，将函数挂载到window.bundle对象下：

// 替换原有的window.connect = connect;和window.execute= execute;
window.bundle = {
  connect: connect,
  execute: execute
};

最佳实践：使用事件监听器替代内联onclick #

内联事件绑定不利于代码维护和封装，推荐使用事件监听器的方式绑定事件：

1. 修改HTML，移除onclick属性：

<button id="connectButton">Connect</button>
<button id="executeButton">Execute</button>

2. 在JS代码中添加事件监听逻辑：

// 在index.js末尾添加
document.getElementById('connectButton').addEventListener('click', connect);
document.getElementById('executeButton').addEventListener('click', execute);

这种方式无需将函数暴露到全局window，能更好地配合Webpack的模块机制实现代码封装。

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