如何在 Webpack 打包后的 JavaScript 中正确调用全局函数-html教程-PHP中文网

如何在 Webpack 打包后的 JavaScript 中正确调用全局函数

本文详解为何 onclick="bundle.connect()" 会报 ReferenceError: bundle is not defined，并提供标准、安全的解决方案：将函数挂载到 window 对象后直接调用 window.connect()，同时适配 ethers.js 最新 API（v6+）。

本文详解为何 `onclick="bundle.connect()"` 会报 `referenceerror: bundle is not defined`，并提供标准、安全的解决方案：将函数挂载到 `window` 对象后直接调用 `window.connect()`，同时适配 ethers.js 最新 api（v6+）。

在使用 Webpack 构建前端 DApp 时，一个常见误区是误以为打包后的模块会自动暴露为全局命名空间（如 bundle 对象）。实际上，Webpack 默认采用模块化封装（如 IIFE 或 ES Module），不会创建名为 bundle 的全局变量。你看到的 bundle.js 只是输出文件名，而非可访问的全局对象。

✅ 正确做法：显式挂载函数到 `window`

你的 index.js 中已正确导出函数：

// index.js
async function connect() { /* ... */ }
async function execute() { /* ... */ }

// ✅ 正确：挂载到 window，使其全局可访问
window.connect = connect;
window.execute = execute;

但 HTML 中仍错误地使用了未定义的 bundle：

<!-- ❌ 错误：bundle 从未被声明或赋值 -->
<button onclick="bundle.connect()">Connect</button>

应改为直接调用 window 上的函数：

<!-- ✅ 正确：利用已挂载的全局属性 -->
<button id="connectButton" onclick="window.connect()">Connect</button>
<button id="executeButton" onclick="window.execute()">Execute</button>
<script src="./dist/bundle.js"></script>

⚠️ 注意顺序：<script></script> 标签必须放在按钮之后，或使用 defer 属性，确保 DOM 加载完成且 bundle.js 已执行、函数已挂载到 window。

? 适配 ethers.js v6+（推荐）

你提供的代码中使用了已废弃的 ethers.providers.Web3Provider —— 这在 ethers.js v6 及以上版本中已被移除。若升级至最新版（如 ^6.12.0），需更新为：

// ✅ ethers.js v6+ 正确写法
const provider = new ethers.BrowserProvider(window.ethereum);
const signer = await provider.getSigner(); // 注意：getSigner() 现为异步方法
const contract = new ethers.Contract(contractAddress, abi, signer);
await contract.store(42);

同时，请确保 package.json 中依赖为：

Feishu calendar sync, local ics to json data for AI agent

将ICS日历文件转为JSON格式，用于飞书日历导入导出及数据集成。

下载

"ethers": "^6.12.0"

若需降级回 v5（不推荐），可执行：

npm uninstall ethers
npm install ethers@5.7.2

但强烈建议迁移到 v6，以获得更好的安全性、类型支持和长期维护保障。

?️ 更佳实践：避免内联 `onclick`

虽然 onclick="window.connect()" 能解决问题，但内联事件处理违背现代前端最佳实践（关注点分离、可测试性、安全性）。推荐改用 addEventListener：

<button id="connectButton">Connect</button>
<button id="executeButton">Execute</button>
<script src="./dist/bundle.js"></script><script>
  // 确保 DOM 就绪后再绑定
  document.addEventListener('DOMContentLoaded', () => {
    document.getElementById('connectButton').addEventListener('click', window.connect);
    document.getElementById('executeButton').addEventListener('click', window.execute);
  });
</script>

这种方式更清晰、易调试，也便于统一处理错误或添加加载状态。

✅ 总结

bundle 不是 Webpack 创建的全局对象，不要在 HTML 中直接引用；
函数需显式挂载到 window（如 window.connect = connect），再通过 window.connect() 调用；
ethers.js v6+ 使用 BrowserProvider 替代 Web3Provider，且 getSigner() 返回 Promise；
优先使用 addEventListener 替代内联 onclick，提升代码健壮性与可维护性。