我正在使用需要回调的Google Maps API。如何从Webpack捆绑包导出回调以供外部脚本（例如Google Maps API）使用？
HTML（Xd输出键）：
<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 ...
我也尝试添加
module.exports = { initMap: initMap }
到，map.js但这没有帮助。
编辑：同样的问题，但在表单事件中使用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打包成一个包时，“ hello”不再打印在控制台上
您的webpack文件（map.bundle.js）通常不会将您的任何函数或变量写入global（在本例中为window）命名空间。
这会导致需要位于全局名称空间（如jQuery或google maps api）上的库出现问题。
解决此问题的一种方法是添加initMap到window对象
var $ = require("jquery");
function initMap() {
$("#hello").text("hello world");
}
window.initMap = initMap;
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句