webpack 包中的导出功能

我正在使用需要回调的谷歌地图 API。如何从 webpack 包导出回调以供外部脚本（例如 Google Maps API）使用？

HTML（X-d 输出键）：

<div id="hello"></div>
<script src="/js/map.bundle.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXX&callback=initMap"></script>

map.js:

var $ = require("jquery");
function initMap() {
    $("#hello").text("hello world");
}

我构建了上面的map.js文件放入名为的 webpack 包中map.bundle.js.

浏览器控制台错误：

Yc 消息：“initMap 不是函数”名称：“InvalidValueError” 堆栈：“新 Yc 处的错误↵（https://maps.googleapis.com/ma https://maps.googleapis.com/ma...

我也尝试添加

module.exports = { initMap: initMap }

to map.js但这没有帮助。

EDIT：同样的问题，但是在表单事件中使用 webpack 包中的 javascript 函数：

HTML:

<form onsubmit="sayHello(event)">
    <button type="submit">Say Hello</button>
</form>

JS:

function sayHello(e) {
    e.preventDefault();
    console.log("hello");
    return false;
}

当JS打包成bundle后，控制台不再打印“hello”

您的 webpack 文件 (map.bundle.js) 通常不会将任何函数或变量写入global（在这种情况下，window) 命名空间。

这会给需要位于全局命名空间（如 jQuery 或 google 地图 api）的库带来问题。

解决这个问题的一种方法是添加initMap到窗口对象

var $ = require("jquery");
function initMap() {
    $("#hello").text("hello world");
}
window.initMap = initMap;